Question

在以下树中，我只想选择PARENT和GRANDCHILD：

<div class="jstree">
 <ul>
  <li>
   <a>PARENT</a>
   <ul>
    <li>
     <a>CHILD</a>
     <ul>
      <li>
       <a>GRANDCHILD</a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

树由jQuery插件“jsTree”创建。

以下代码有效，但我认为有更优雅的方法：

$(document).on("click", ".jstree a:not(.jstree > ul > li > ul > li > a)", function(event) {
   ...
});

Answer 1

您可以使用class或id来简化选择

HTML：

<div class="jstree">
 <ul>
  <li>
   <a class="parent">PARENT</a>
   <ul>
    <li>
     <a>CHILD</a>
     <ul>
      <li>
       <a class="grandchild">GRANDCHILD</a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Jquery：

$('.parent, .grandchild').click(function(event) {
   ...
});

Answer 2

在某些情况下，简单地使用HTML类可能比构建复杂的CSS选择器更好。

<div class="jstree">
 <ul>
  <li>
   <a class="tree-item">PARENT</a>
   <ul>
    <li>
     <a>CHILD</a>
     <ul>
      <li>
       <a class="tree-item">GRANDCHILD</a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

然后

$('.jstree .tree-item')

Answer 3

<强> Working jsFiddle Demo

您的选择器很好，这是一个较短的选择器：

$('.jstree a:not(:eq(1))')

注

最好避免使用上面的选择器或你自己编写的选择器。 而是选择基于id或class的元素。选择基于层次结构的元素会破坏大型标记。

如何选择父母和孙子？

3 个答案:

注