如何解决DOM中的列表项

Question

I've this markup

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

When an item is clicked, is there a way in jQuery to identify in the DOM, the previous and the next li so that I can use jQuery functions on those elements??

Say, if the person clicks on item 2, i want to hide item 1 and item 3.. similarly, if the user clicks on item 3, hide item 2 and item 4 (previous and next item in the list).

Answer 1

1. Get a pointer to the previous and next elements.
2. Select all siblings that are not the previous and next elements.
3. Hide the previous and next siblings.
4. Show the other elements.

This allows the code to work more than once :)

$('#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 .

If you don't care if the other elements are hidden forever once clicked, simply remove the all references to the siblings variable and its relevant code.

Answer 2

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

Edit:

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

From the comment, This will show all before hiding the prev and next li elements.