JavaScript

Question

目标是select任何后代——不管direct-descendant指示——但不是他们的children。换句话说，如果我从 document 搜索，我想找到 all children ，它们 not 被目标 select或:

<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]);

理想情况下，result-set 中的 select #a1 & #b1。但是，不应包括 #a2、#a3 和 #b2，因为这会导致 一个范围到多个 。

此补充功能将递归地深入到集合中 每个 layer-element 的下一个范围。因此，下一个递归调用将 return 包含 #a2、#b2 但不包含 #a3 或任何 children ([data-behavior]) 的集合 #b2.

另外，这个问题应该不被标记为this question的重复，因为Accepted-Answer是不此处可接受 - 此处接受的答案应使用 jQuery selector 或证明仅使用 jQuery selector.

是不可能的

编辑

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

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

现在，可以使用递归函数获取 parent-context 并找到 first-level 范围 —— 并以这种方式无限期地重复。这是一个例子：

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>

JavaScript | jQuery | Select分层：Select最近Children但他们Children

JavaScript | jQuery | Selecting In Layers: Select Closest Children But Their Children

jquery

children

closest

编辑