2

我有这个 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

4

3 回答 3

3

演示

$("#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));
});
于 2013-07-28T15:45:23.397 回答
0

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

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

来自index 的 JQuery 文档

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

于 2013-07-28T15:09:19.527 回答
0

这个解决方案怎么样?

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

于 2016-09-07T20:14:33.377 回答