CODEWITHSUNDEEP
jqueryjquery-selectors
chud russel
chud russel

Reputation: 23

jquery children() selector not selecting proper element

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.

Upvotes: 2

Views: 476

Answers (3)

Zain Shaikh
Zain Shaikh

Reputation: 6043

You cal also use following code to get the text of third td.

alert($(this).find("td").eq(2).html());

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38503

Try $(this).children('td:last').html()

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630419

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.

Upvotes: 3

Related Questions