Question

我在解决这个问题时遇到了一些麻烦。我有一个无序列表菜单，我想用文件夹图标设置所有最后一个元素的样式，并使用plus.gif图像设置所有可扩展（父）元素的样式。我想通过使用jquery使用.addclass（）来简单地更改类，它将包含用于添加背景图像的css。我下面的jquery代码只选择“：last-child”，它在列表的最后一个元素上放置一个文件夹图标。我需要在没有任何孩子的所有“li”之前放置一个文件夹图标，并在所有有孩子的人面前放置一个加号图标。有没有办法实现这个目标？

这是我的HTML：

<ul id="nav">
 <li>Heading 1
  <ul>
   <li>Sub page A
    <ul>
     <li>Sub page A - 1
      <ul>
       <li>A - 1: 0</li>
       <li>A - 1: 1</li>
       <li>A - 1: 2</li>
      </ul>
     </li>
     <li>Sub page A - 3</li>
     <li>Sub page A - 2</li>
    </ul>
   </li>
   <li>Sub page B</li>
   <li>Sub page C
    <ul>
     <li>Sub page C - 1
      <ul>
       <li>C - 1: 0</li>
       <li>C - 1: 1</li>
       <li>C - 1: 2</li>
      </ul>
     </li>
     <li>Sub page C - 3</li>
     <li>Sub page C - 2</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>Heading 2
  <ul>
   <li>Sub page D</li>
   <li>Sub page E</li>
   <li>Sub page F</li>
  </ul>
 </li>
 <li>Heading 3
  <ul>
   <li>Sub page G</li>
   <li>Sub page H</li>
   <li>Sub page I</li>
  </ul>
 </li>
</ul>

这是jquery代码：

    $(function(){

 //add class to last item in each list
 $('#nav li').find('li:last').addClass('menu_last_child');
});

Answer 1

这会将您的课程添加到所有没有孩子的li

$("#nav li:not(:has(li))").addClass('menu_last_child');

这将为所有有孩子的li添加一个班级

$("#nav li:has(li)").addClass("menu_parent");

另请注意，:last和:last-child之间存在差异。前者将仅选择与选择器匹配的返回项集中的最后一项，而后者将返回其父项上下文中的最后一项（与css :last-child选择器相同）

jquery选择嵌套树菜单的所有最后元素无序列表...而不仅仅是：last-child

1 个答案: