Question

我在理解选择器和索引在JQuery中的工作方式时遇到了一些麻烦。我希望编写一些基于类属性操作html元素的函数，我意识到当我尝试使用index（）方法或prevAll（）。length来获取元素在一组元素中的位置时，我并不总是得到预期的结果。

下面，我有一段jquery代码，它通过类.element_list为所有内容做了一些事情，然后用类.element_list_item来处理所有内容。我有两个.element_lists，A和B，所有这一切都提醒我.element_list_items的索引。对于列表A，索引按预期返回0和1。在列表B中，我添加了一个没有class属性的thead元素，所以在我看来它不应该被我的jquery代码抓住，但是两个.element_list_items返回索引为1和2，而不是0和1，如预期

为什么？我的选择器正在查找类.element_list_item的元素和一个等于包含.element_list的ID的类，那么为什么添加thead会影响tbodies的位置？

理解这一点的任何帮助都表示赞赏。

<script language="javascript" type="text/javascript">
$(document).ready(function ()
{
$('.element_list').each(function()
{
    var list_id = $(this).attr('id');
    var first_item_id = $(this).find('.' + list_id + '.element_list_item:eq(0)').attr('id');

    alert('List and first list item:  ' + list_id + ' - ' + first_item_id);        

    $(this).find('.' + list_id + '.element_list_item').each(function()
    {
        var list_item_id = $(this).attr('id');
        var index = $(this).prevAll().length;

        alert('List item and its index:  ' + list_item_id + ' - ' + index);
    });
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" enableviewstate="true">
<br />
<br />
<table class="table_noborder">
    <thead>
        <tr>
            <td>List A</td>
        </tr>
    </thead>
    <tbody id="list_A" class="element_list">
        <tr>
            <td>
                <table>
                    <tbody id="list_A_item0" class="element_list_item list_A">
                        <tr>
                            <td>First Item</td>
                        </tr>
                    </tbody>
                    <tbody id="list_A_item1" class="element_list_item list_A">
                        <tr>
                            <td>Second Item</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <td>List B</td>
        </tr>
    </thead>
    <tbody id="list_B" class="element_list">
        <tr>
            <td>
                <table>
                    <thead>
                        <tr>
                            <td>Header</td>
                        </tr>
                    </thead>
                    <tbody id="list_B_item0" class="element_list_item list_B">
                        <tr>
                            <td>First Item</td>
                        </tr>
                    </tbody>
                    <tbody id="list_B_item1" class="element_list_item list_B">
                        <tr>
                            <td>Second Item</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</form>
</body>
</html>

Answer 1

使用没有参数的.index()将得到它与所有兄弟姐妹相比的索引。您可以传入一个选择器，以便与集合进行比较检查

所以

$('#list_B_item0').index() // will return 1 since thead(it's prev sibling) is in index 0

但

$('#list_B_item0').index('.element_list_item.list_B') //  returns 0 since it will compare it's index with the collection

也可以通过其他方式完成

$('.element_list_item.list_B').index('#list_B_item0') // returns 0

jquery newb，理解选择器和索引的麻烦

1 个答案: