在图层中选择:选择最近的孩子但他们的孩子
在图层中选择:选择最近的孩子但他们的孩子
提问于 2015-11-09 02:32:48
我们的目标是选择任何后代--不管直接后代的指示是什么--而不是他们的孩子。换句话说，如果我从document搜索，我想找到所有由目标选择器包装的而不是的子级
<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，因为这将对许多人进行一个范围。
这方面的互补函数将是递归的，可以向下挖掘到集合中的每个层元素的下一个作用域。因此，下一个递归调用将返回一个包含#a2、#b2，但不包含#a3或#b2的任何子级([data-behavior])的集合。
而且，这个问题不应该被标记为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);
});
}
},请务必在到期时给予信贷。
#预谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-09 02:49:48
理想情况下，这将在结果集中选择
#a1&#b1。
尝试对第一个结果集使用: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>
因此，下一个递归调用将返回一个包含
#a2、#b2，但不包含#a3或#b2的任何子级([data-behavior])的集合。
使用$.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33601631
复制相关文章
相似问题
腾讯云开发者
