Question

有人可以帮我解决这个JQuery吗？

我有一堆列表项，当点击其中一个时，我想从同一个UL中的每个列表项中删除“selected”类属性。

我有一个javascript函数：

<script type='text/javascript'>

function clearSelectedCSS(item) {

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

}
</script>

通过每个LI的onclick部分调用它，并传递'this'。

我无法弄清楚JQuery，有人可以给我一个指针吗？我的代码基本上想要选择被点击的项目，获取其父项，然后选择属于该父项的所有列表项（即列表中被点击的每个项目列表'itemselected'），然后删除该类item选择'从他们所有。

Answer 1

当你可以抓住the .siblings()时，无需获取.parent()：

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

这会更有效，因为.parent().find()将测试所有后代元素。即使您执行了.parent().children()，也会添加不必要的遍历。

编辑：我不确定是否要包含在班级删除中点击的那个。

如果是这样，你可以这样做：

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

或

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

Answer 2

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

Answer 3

如果要选择除被点击的lis之外的所有lis，可以使用$().siblings()：

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

使用parent().find('li.itemselected')将包含已点击的<li>。

Answer 4

我开始玩这个，直到我开始工作：

<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>

基本上，我必须解决项目的父项以获取<ul>容器对象，然后使用>子选择器来获取<li>的集合。此时.removeClass()调用正常。希望有所帮助 -

JQuery获取列表中的所有项目

4 个答案: