jQuery Selector (children, eq, and innerhtml)

Question

我想选择HTML块的第五个元素，即下面的表：<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());

N.B:不是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>