ansaurus

Question

Answer 1

+1 A:

  $(item).parent().find('li.itemselected').removeClass('itemselected');

Stefan Kendall 2010-10-04 14:48:43

Awesome thanks!

SLC 2010-10-04 14:54:18

Answer 2

+2 A:

No need to get the .parent() when you can just grab the .siblings():

$(item).siblings('.itemselected').removeClass('itemselected');

This will be more efficient, because .parent().find() will test all descendant elements. Even if you did .parent().children(), you're adding an unnecessary traversal.

EDIT: I'm not sure from the question if you want to include the one that was clicked in the class removal.

If so, you could do this:

$(item).parent().children('.itemselected').removeClass('itemselected');

or

$(item).siblings().andSelf().filter('.itemselected').removeClass('itemselected');

patrick dw 2010-10-04 14:59:33

See my answer for why these are not equivalent.

lonesomeday 2010-10-04 15:02:06

@lonesomeday - We have effectively the same answer. What is not equivalent?

patrick dw 2010-10-04 15:04:51

$(item).parent().children() includes the original item, $(item).siblings() does not.

lonesomeday 2010-10-04 15:06:27

@lonesomeday - My answer is to use `.siblings()` not `.parent().children()`. I was just commenting that while `.children()` is more efficient than `.find()`, it is still less efficient than `.siblings()`.

patrick dw 2010-10-04 15:08:58

I realise this. My point is that the result of $(item).parent().children() is not the same as $(item).siblings(). This needs to be clear. Otherwise, I agree with your post.

lonesomeday 2010-10-04 15:11:27

@lonesomeday - ok, I see what you're getting at.

patrick dw 2010-10-04 15:13:32

Yes, that's the nice way to do it. +1

lonesomeday 2010-10-04 15:15:05

Answer 3

A:

If you want to select all lis except the one that was clicked, you can use $().siblings():

$(item).siblings('li.itemselected').removeClass('itemselected');

Using parent().find('li.itemselected') will include the <li> that was clicked.

lonesomeday 2010-10-04 15:00:59

Answer 4

A:

Hey--

I played around with this until I got this to work:

<head>    
<script>
   function clearSelectedCSS(item) {
      $('#' + item.parentElement.id + ' > li').removeClass('exampleClass');
   }
</script>
</head>

<body>
<form id="form1">
   <ul id="List1">
      <li class="exampleClass" onclick="clearSelectedCSS(this)">First Item</li>
      <li class="exampleClass" onclick="clearSelectedCSS(this)">Second Item</li>
      <li class="exampleClass" onclick="clearSelectedCSS(this)">Third Item</li>
   </ul>

   <ul id="List2">
      <li class="exampleClass" onclick="clearSelectedCSS(this)">Fourth Item</li>
      <li class="exampleClass" onclick="clearSelectedCSS(this)">Fifth Item</li>
      <li class="exampleClass" onclick="clearSelectedCSS(this)">Sixth Item</li>
   </ul>

</form>
</body>
</html>

Basically, I had to address the parent of the item to get the <ul> container object, and then used the > child selector to get the collection of <li>. At that point the .removeClass() call works correctly. Hope that helps--

davecoulter 2010-10-04 16:59:28

ansaurus

tags:

views:

answers:

JQuery get all items in a list

related questions