2

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

下面，我有一段 jquery 代码，它对类 .element_list 的所有内容执行某些操作，然后在其中对类 .element_list_item 的所有操作执行操作。我有两个 .element_list，A 和 B，所有这些都是提醒我 .element_list_items 的索引。对于列表 A，索引按预期返回为 0 和 1。在列表 B 中，我添加了一个没有类属性的 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>
4

1 回答 1

2

使用不带参数的.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
于 2012-12-20T20:25:43.333 回答