CODEWITHSUNDEEP
jquery
gtilflm
gtilflm

Reputation: 1475

jQuery Selector (children, eq, and innerhtml)

I want to select the 5th element of the HTML block below which is this table: <table border="0" style="width: 577px; height: 224px;"> and then alert the innerhtml to make sure I'm selecting the right thing.

My jQuery code: alert($('#content-text').children().eq(5).innerhtml);

HTML block...

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

Any ideas why my jquery selector doesn't seem to be working?

Upvotes: 0

Views: 1064

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

A different approach is:

$('#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>

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

innerHTML is javascript property. Use html() instead like following.

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

N.B: not eq(5), eq(4) will select <table border="0" style="width: 577px; height: 224px;">

Upvotes: 2

Related Questions