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）返回正确的索引。 You can check in this jsFiddle

Answer 1

DEMO

$("#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());
});

来自JQuery documentation for index：

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

Answer 3

这个解决方案怎么样？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: