Question

I am using jquery to try to select an item within a simple table. When I call something like

$('.broadcast_item_even').mouseover(function(event) {

    //SET TR GLOW EFFECT
    $(this).attr('class', 'broadcast_item_hover');

    //ALERT THE VALUE 
    alert( $(this).children(2).html());

});

on this table object

<table style="color: rgb(0, 0, 255);" id="Table1">  
    <tbody>
        <tr class="broadcast_item_even">
            <td>
                <img height="50px" width="50px" alt="user avatar" src="../../Avatar/default-user.jpg">

            </td>
            <td>                 
                jimbo60
            </td>

            <td>
                10.8 miles
            </td>

        </tr>
    <tbody>
</table>

the result prints

<img height="50px" width="50px" alt="user avatar" src="../../Avatar/default-user.jpg">

and not

10.8 miles

which is what I am expecting. Does anyone have an idea as to why this might be occurring? If so, any help would be greatly appreciated.

Answer 1

If you want the third child you need :eq(2) or .eq(2), like this:

$(this).children().eq(2).html()
//or:
$(this).children(":eq(2)").html()

You can test it out here. The .children() function takes a selector, not an index.