javascript - 如何使用一个<li>的索引来识别对应的<li>

Question

我一直在研究这个问题，但我对如何通过 jQuery 创建指针和指针实例化没有透彻的理解感到很沮丧。

我有两个列表:

<div class="listSet">
    <ul id="list1">
        <li>One bug <a href="#">X</a></li>
        <li>Two bug <a href="#">X</a></li>
        <li>Three bug <a href="#">X</a></li>
    </ul>
</div>
</div class="listSet">  
    <ul id="list2">
        <li><img src="bug1.jpg"></li>
        <li><img src="bug2.jpg"></li>
        <li><img src="bug3.jpg"></li>
    </ul>
</div>

我正在使用对第一个列表的点击捕获来为我提供该无序列表的索引:

var theBox = $(this).parents('li');
theBoxInd = $('#list ul li').index(theBox);

如何获取第二个列表中相应 LI 的句柄？我想从屏幕上删除它们，但似乎无法复制让第二个列表的索引能够 .remove() 这两个 LI 的想法。

感谢任何帮助。

Answer 1

您可以使用 add() 的组合方法和 index()实现方法:

$("#list1 li a").click(function(e) {
    e.preventDefault();
    var $li = $(this).parent();
    $("#list2 li:eq(" + $li.index() + ")").add($li).remove();
});

这将删除具有相同 index 的两个 li 元素

工作示例:http://jsfiddle.net/cttZn/5/

---

或者你可以像这样使用 :nth-child 选择器:

$("#list1 li a").click(function() {
    var child = $(this).parent().index() + 1;
    $("#list1, #list2").find("li:nth-child(" + child + ")").remove();
});

工作示例:http://jsfiddle.net/cttZn/8/