javascript - 如何处理 DOM 中的列表项

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

1. 获取指向上一个和下一个元素的指针。
2. 选择不属于上一个和下一个元素的所有同级元素。
3. 隐藏上一个和下一个 sibling 。
4. 显示其他元素。

这允许代码多次运行:)

$('#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 变量及其相关代码的所有引用即可。