JavaScript | jQuery | Select分层:Select最近Children但他们Children
JavaScript | jQuery | Selecting In Layers: Select Closest Children But Their Children
目标是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
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>
目标是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
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>