jQuery Selector（children，eq和innerhtml）

Question

我想選擇下面的HTML表格的第5個元素：<table border="0" style="width: 577px; height: 224px;">，然後提醒innerhtml以確保我選擇了正確的東西。

我的jQuery代碼：alert($('#content-text').children().eq(5).innerhtml);

HTML塊...

<div id="content-text"> 
<p><span style="font-size: large;"><span style="font-family: comic sans ms,sans-serif;">Title</span></span></p> 
<p>&nbsp;</p> 
<p><span style="font-size: large;"><span style="font-family: comic sans ms,sans-serif;">Directions</span></span></p> 
<table border="0" style="width: 577px; height: 207px;"> 
    <tbody> 
     <tr> 
      <td valign="middle">link 1</td> 
      <td valign="middle">link 2</td> 
     </tr> 
    </tbody> 
</table> 
<table border="0" style="width: 577px; height: 224px;"> 
    <tbody> 
     <tr> 
      <td style="text-align: center;"><span style="font-size: medium;">more directions</span> 
       <p><span style="font-family: tahoma,arial,helvetica,sans-serif;">info</span></p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Practice probs. 
      </td> 
     </tr> 
    </tbody> 
</table> 
<table width="610" height="338" cellpadding="0" border="0" style="width: 607px; height: 338px;"> 
    <tbody> 
     <tr> 
      <td> 
       Assignment problems listed out 
      </td> 
      <td style="padding-left: 40px;"> 
       Image 
      </td> 
     </tr> 
     <tr> 
      <td> 
       info. about correcting problems 
      </td> 
     </tr> 
    </tbody> 
</table> 

任何想法，我的jQuery選擇似乎爲何不奏效？

Answer 1

innerHTML是javascript屬性。改爲使用html()，如下所示。

alert($('#content-text').children().eq(4).html()); 

NB：不eq(5)，eq(4)將選擇<table border="0" style="width: 577px; height: 224px;">

Answer 2

一種不同的方法是：

$('#content-text').children('[style="width: 577px; height: 224px;"]')[0].outerHTML 

$(function() { 
 
    console.log($('#content-text').children('[style="width: 577px; height: 224px;"]')[0].outerHTML); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="content-text"> 
 
    <p><span style="font-size: large;"><span style="font-family: comic sans ms,sans-serif;">Title</span></span></p> 
 

 
    <p>&nbsp;</p> 
 

 
    <p><span style="font-size: large;"><span style="font-family: comic sans ms,sans-serif;">Directions</span></span></p> 
 
    <table border="0" style="width: 577px; height: 207px;"> 
 
     <tbody> 
 
     <tr> 
 
      <td valign="middle">link 1</td> 
 
      <td valign="middle">link 2</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <table border="0" style="width: 577px; height: 224px;"> 
 
     <tbody> 
 
     <tr> 
 
      <td style="text-align: center;"><span style="font-size: medium;">more directions</span> 
 

 
       <p><span style="font-family: tahoma,arial,helvetica,sans-serif;">info</span></p> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       Practice probs. 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <table width="610" height="338" cellpadding="0" border="0" style="width: 607px; height: 338px;"> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
       Assignment problems listed out 
 
      </td> 
 
      <td style="padding-left: 40px;"> 
 
       Image 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       info. about correcting problems 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>