jquery - 获取不包括确定元素的元素的索引

Question

我有这个 HTML 结构：

<ul id="list">
    <li><i class="icon-remove"></i> file1</li>
    <li class="error"><i class="icon-remove"></i> file2</li>
    <li><i class="icon-remove"></i> file3</li>
</ul>

所以现在，当我单击 .icon-remove 时，我想知道他的父元素 (li) 的索引，不包括（在计数中）li.error。

我试过这个：

$("#list li:not(.error) .icon-remove").click(function() {
    alert($(this).parent().index($("#list li:not(.error)")));
});

它只为第一个元素 (0) 返回正确的索引。你可以签入这个 jsFiddle

Answer 1

演示

$("#list li:not(.error) .icon-remove").click(function () {
    var $lis = $(this).closest('ul').find('li:not(.error)'),
        $li = $(this).closest('li');
    alert($lis.index($li));
});

Answer 2

如何使用closest来查找li元素。将选择器传递给index它的行为与您期望的不同。

$("#list li:not(.error) .icon-remove").click(function() {
    console.log($(this).closest("li").index());
});

来自index 的 JQuery 文档：

如果在元素集合上调用 .index() 并传入 DOM 元素或 jQuery 对象，则 .index() 返回一个整数，指示传递的元素相对于原​​始集合的位置。

Answer 3

这个解决方案怎么样？

$(document).ready(function () {
	$("#list li:not(.error) .icon-remove").click(function() {
            alert($('ul#list > li').not('.error').index($(this).parent()));
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
    <li><i class="icon-remove">remove</i> file1</li>
    <li class="error"><i class="icon-remove">remove</i> file2</li>
    <li><i class="icon-remove">remove</i> file3</li>
</ul>