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());

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery选择器（children，eq和innerhtml）

2 个答案: