Question

我有这个标记

<ul id="body">
   <li class="item">1</li>
   <li class="item">2</li>
   <li class="item">3</li>
   <li class="item">4</li>
</ul>

当单击一个项目时，jQuery中是否有一种方法可以在DOM中识别前一个和下一个li，以便我可以在这些元素上使用jQuery函数？

假设，如果此人点击第2项，我想隐藏第1项和第3项..同样，如果用户点击第3项，则隐藏第2项和第4项（列表中的上一个和下一个项目）。

Answer 1

获取指向上一个和下一个元素的指针。
选择不是上一个和下一个元素的所有兄弟姐妹。
隐藏上一个和下一个兄弟姐妹。
显示其他元素。

这允许代码多次工作：）

$('#body > li').click(function() {
  var prev = $(this).prev(),
      next = $(this).next(),
      siblings = $(this).siblings().not(prev).not(next);

  prev.add(next).hide();  
  siblings.show(); 

});

jsFiddle

如果您不关心其他元素在点击后是否永远隐藏，只需删除对siblings变量及其相关代码的所有引用。

Answer 2

$('#body .item').click(function() {
    $(this).prev().add($(this).next()).hide();
});

编辑：

$('#body .item').click(function() {
    $(this).siblings().show().end().prev().add($(this).next()).hide();
});

从评论中，这将在隐藏prev和next li元素之前显示所有内容。

如何处理DOM中的列表项

2 个答案: