我正在尝试构建 jQuery 选择器,以“非贪婪”方式将 html 元素与“widget”类相匹配,并且无需任何文档结构假设。我的意思是:不将内部子元素与同一类匹配,也不关心小部件元素是否是直接子元素。
我知道的唯一方法也是使用 .not() 选择器,例如:
$(".widget").not(".widget .widget");
但是这样选择器就无法在小部件内容中再次找到“子小部件”。
例如,给定以下 html:
<div class="otherClass">
<h1>Some title</h1>
<p>Some text...</h1>
<div class="widget" id="w100">
<div>
<h2>Some intermediate level...</h2>
<div class="widget" id="w110">
<h2>Some title</h2>
<div class="widget" id="w111">
...
</div>
<div class="widget" id="w112">
...
</div>
</div>
</div>
<div class="widget" id="w120">
<h2>Some title</h2>
<div class="widget" id="w121">
...
</div>
<div class="widget" id="w122">
...
</div>
</div>
</div>
</div>
假设我尝试构建的选择器存储在选择器变量中,我希望:
var s0 = $(selector); // Matches div#w100 but not inner elements with "widget" class".
var s1 = $(selector, s0); // Matches div#w110 and div#w120
var s21 = $(selector, s1[0]); // Matches div#w111 and div#112
var s22 = $(selector, s1[1]); // Matches div#w121 and div#122
我的目标是实现一个简单的可嵌套小部件系统,该系统基于应用于具有“小部件”类的元素的小型 Controller data-xxx 属性中的 s 和其他参数来选择实际的小部件 Controller 和参数。但是,小部件必须是 ab 文件以在其 html 内容中展开其他子小部件。
最佳答案
我对你的问题的解释与这里其他人的解释有所不同。在我看来,你想要的是从某个点遍历 DOM,搜索 .widget
但不要在该类的任何元素下面递归。因此,如果你这样做:
var tops = $( /* some selector here*/ );
您想要顶级小部件,如果您这样做:
var next = $(tops[0]).find( /* some selector here*/ );
您希望第二级小部件位于第一个顶级小部件的下方,等等。
有一个插件可以执行此操作:
https://github.com/jstnjns/jquery-nearest
我将冒昧地在这里发布其代码:
(function() {
$.fn.nearest = function(selector) {
var $found = $(),
checkChildren = function(filter) {
var $children = this.children()
$collection = $();
$children.each(function() {
var $matches = $(this).filter(filter),
$fails = $(this).not(filter);
if($matches.length) { $found = $found.add($matches); }
if($fails.length) { checkChildren.call($fails, filter); }
});
};
checkChildren.call(this, selector);
return $found;
}
}());
你可以像这样使用它:
var tops = $(document).nearest(".widget");
var next = $(tops[0]).nearest(".widget");
关于jquery - 非贪婪 jquery 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30304927/