jquery - 如何选择父母和孙子？

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>

查询：

$('.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

工作 jsFiddle 演示

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

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

---

笔记

最好避免使用上述选择器，或者您自己编写的选择器。而是根据id或选择元素class。基于层次结构选择元素会破坏大的标记。