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

尝试 $(this).children('td:last').html()

Answer 3

您还可以使用以下代码来获取第三个 td 的文本。

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