Question

我有这样的菜单;

<ul>
 <li><a>1</a></li> 
 <li><a>2</a>
  <ul>
   <li><a>3</a></li>
   <li><a>4</a></li>
   <li><a>5</a></li>
   <li><a>6</a>
    <ul>
     <li><a>7</a></li>
     <li><a>8</a></li>
     <li><a>9</a></li>
    </ul> 
   </li>
  </ul>
  <li><a>10</li>
</ul>

如果我想使用jQuery在第二级进行选择。

$('ul li ul li') { action() }

但是当我这样做的时候，这个动作也会被它的孩子们采用，（ul li li li li li）我不希望这种情况发生。

我只想选择（ul li ul li）。

使用jQuery，我该如何使它工作？

Answer 1

解决此问题的最简单方法是为外部<ul>提供CSS类标识符或ID。然后使用直接后代选择器

$('ul.className > li > ul > li') // CSS class className

或

$('#id > li > ul > li') // id id

Answer 2

$('ul > li > ul > li').action()

但是你需要以某种方式锚定顶级ul ...例如。

$('#menu > li > ul > li').action()

Answer 3

您是在谈论仅适用于元素本身而不是其中包含的元素的点击处理程序吗？我建议使用类并向子元素添加一个单击处理程序，以防止事件使用stopPropagation冒泡。后者是必需的，因为当您单击内部元素时，事件也将在其父元素上触发。如果你真的只想在单击元素本身而不是它的子元素时调用处理程序，那么你需要阻止事件冒泡。

$('ul.secondlevel li').click( function() {
     // do something
} );

$('ui.thirdlevel li').click( function(e) {
       // do something else
       e.stopPropagation();
});

Answer 4

但是当我这样做时，这个动作会也被它的孩子们采用，（ul li ul li li li）我不希望这样发生。

使用eq选择器定位特定的li：

$('#mainmenu li ul li').eq(5)............

或其变体：

$('#mainmenu li ul li:eq(5)')............

Answer 5

您的意思是要选择包含3,4,5和6的li吗？如果是这样，给他们的父（第二级）ul一个id并使用直接后代选择器：

$('ul#second_level_ul > li')

选择一个确切的元素而不是它的子元素

5 个答案: