Question

I want to hide all other LI’s in a certain UL except the LI that I select.

<ul>
  <li><div></div></li>
  <li><div></div></li>
</ul>
<ul>
  <li><div></div></li>     -- HIDE
  <li><div></div></li>     -- SELECT
  <li><div></div></li>     -- HIDE
</ul>
<ul>
  <li><div></div></li>
  <li><div></div></li>
</ul>

How can I solve this the best way?

I’ve tried using indexes, but having some problems getting it to work, and selecting the correct UL. As you may see, I’ve got no class on the UL’s or LI’s so I think the only option is LI’s.

What I really do, is selecting a div inside the LI so, I get the selected LI’s index by:

var li_index = $(this).parent().index();

Answer 1

You traverse the DOM up from the div that was clicked then hide the other elements with .not($(this).parent()).toggle() -> Not the li that surrounds this div

$('div').click(function () {
    $(this).closest('ul').find('li').not($(this).parent()).toggle();
});

.toggle() can be replaced with .hide() if you don’t want the User to be able to reverse their decision.

JS Fiddle: http://jsfiddle.net/tDmy3/2/