我在理解 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>
最佳答案
使用.index()不带参数将获得它与所有 sibling 相比的索引。您可以传入一个选择器，以便它与集合进行比较
所以
$('#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
关于javascript - jquery newb，难以理解选择器和索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13979668/