JavaScript | jQuery |分层选择: Select Closest Children But Their Children

Question

目标是选择任何后代 - 无论直系后代指示如何 - 但不选择他们的 child 。换句话说，如果我从文档中搜索，我希望找到目标选择器未包含的所有子元素:

<div id="a1" class="scenario-1" data-behavior="test">
    test
    <div id="a2" data-behavior="test">
        test 1
        <div id="a3" data-behavior="test">
            test 2
        </div>
    </div>
</div>

<div class="scenario-2">
    <div id="b1" data-behavior="test">
        test 1
        <div id="b2" data-behavior="test">
            test 2
        </div>
    </div>
</div>

$(document).findAllInFirstLayer([data-behavior]);

理想情况下，这会在结果集中选择 #a1 和 #b1。但是，不应包含 #a2、#a3 和 #b2，因为这会将一个范围扩展到多个范围 em>.

对此的补充函数将递归地深入到集合中每个层元素的下一个范围。因此，下一个递归调用将返回一个包含 #a2、#b2 的集合，但不包含 #a3 或任何子项 ([data #b2 的-行为])。

此外，这个问题不应该被标记为 this question 的重复项。因为接受的答案在这里不可接受——这里接受的答案应该使用 jQuery 选择器或证明仅使用 jQuery 选择器是不可能的。

编辑

在@guest271314的帮助下，我们得到了以下答案:

'[data-behavior]:not([data-behavior] [data-behavior]), [data-behavior]:first'

现在，递归函数可用于获取父上下文并查找第一级范围 - 并以这种方式无限期地递归。这是一个例子:

arm: function autoRegisterModules(parent) {
    var $firstScope = $(parent).find('[data-behavior]:not([data-behavior] [data-behavior]), [data-behavior]:first');
    console.log('#context, #first-scope', parent, $firstScope);
    if ($firstScope.length) {
        $firstScope.each(function (i, p) {
            autoRegisterModules(p);
        });
    }
},

请务必按时给予信用。

#prethanks

Answer 1

This, ideally, would select #a1 & #b1 in the result-set.

尝试使用 :not() 获取第一个结果集，:first 获取下一个结果

var first = $("[data-behavior]:not([data-behavior] [data-behavior])"),
  second = first.find("[data-behavior]:first"),
  third = second.find("[data-behavior]:first");

console.log(first, second, third);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="a1" class="scenario-1" data-behavior="test">
  test
  <div id="a2" data-behavior="test">
    test 1
    <div id="a3" data-behavior="test">
      test 2
    </div>
  </div>
</div>

<div class="scenario-2">
  <div id="b1" data-behavior="test">
    test 1
    <div id="b2" data-behavior="test">
      test 2
    </div>
  </div>
</div>

<小时/>

So the next recursive call would return a set containing #a2, #b2, but not #a3 or any children ([data-behavior]) of #b2.

使用$.fn.extend()

(function($) {
  $.fn.extend({
    layers: function(sel) {
      var root, next, res = [],
        sel = sel || this.selector;
      if ($(sel + ":not(" + sel + " " + sel + ")").length) {
        root = $(sel + ":not(" + sel + " " + sel + ")");
        res.push([root]);
        if (root.find(sel + ":first").length) {
          next = root.find(sel + ":first");
          res.push([next]);
          while (next.find(sel + ":first").length) {
            next = next.find(sel + ":first");
            res.push([next])
          }
        }
      }
      return this.data("layers", res)
    }
  })
}(jQuery))

var layers = $("[data-behavior]").layers().data("layers");
$.each(layers, function(key, value) {
  console.log(key, value[0])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="a1" class="scenario-1" data-behavior="test">
  test
  <div id="a2" data-behavior="test">
    test 1
    <div id="a3" data-behavior="test">
      test 2
    </div>
  </div>
</div>

<div class="scenario-2">
  <div id="b1" data-behavior="test">
    test 1
    <div id="b2" data-behavior="test">
      test 2
    </div>
  </div>
</div>