Селектор jquery children () не выбирает нужный элемент

Question

Я использую jquery, чтобы попытаться выбрать элемент в простой таблице.Когда я вызываю что-то вроде

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

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

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

});

для этого табличного объекта

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

, результат печатает

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

, а не

10.8 miles

это то, что я ожидаю.У кого-нибудь есть идея относительно того, почему это может происходить?Если это так, любая помощь будет принята с благодарностью.

Answer 1

Если вы хотите третьего ребенка, вам нужно :eq(2) или .eq(2), например:

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

Вы можете проверить это здесь . Функция .children() использует селектор , а не индекс.

Answer 2

Вы также можете использовать следующий код, чтобы получить текст третьего тд.

предупреждение ($ (это) .find ( "тд") экв (2) .html ().);

Answer 3

Попробуйте $(this).children('td:last').html()