jquery - 如何选择终止从类 'X' 的节点 A 开始的路径的所有节点 S 的集合，其中只有根节点和终端节点属于类 'X' ？

Question

基本上，我正在寻找一种方法来选择子“my-class”节点，即使它们不是直接子节点，并且在给定任何“my-class”元素的情况下不选择任何孙子“my-class”节点。例如，给定“a”，它将返回“b”、“g”。给定“b”，它将返回“c”、“f”，给定“c”将返回“d”、“e”，而“d”将不返回任何内容。我似乎无法找到一种无需遍历 DOM 即可完成此操作的方法。

<div class="my-class" id="a">
  <div>
    <div class = "my-class" id="b">
      <div class = "my-class" id="c">
        <div class = "my-class" id="d">
        </div>
        <div class = "my-class" id="e">
        </div>
      </div>
      <div class = "my-class" id="f">
      </div>
    </div>
    <div>
      <div class = "my-class" id="g">
        <div>
          <div>
            <div class="my-class" id="h">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我现在所做的只是遍历 DOM。如果它的“my-class”执行我的操作，如果它不继续遍历树的那部分。

function traverse(element) {
  $(element).children(".my-class").trigger("my-event");
  var children = $(element).children(":not(.my-class)");
  for (var i = 0; i < children.length; i++) {
    traverse(children[i]);
  }
}

Answer 1

尝试:

var $children = $('.my-class').children();

.children()将为您的选择器提供直接后代。

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.