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

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 ul li ul 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 ...例如，使用ID。

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

Answer 3

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

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

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