jQuery:find()子节点直到遇到某个阈值元素
我有一个嵌套的表结构
我有jQuery选择$("#first")
。 我想在这个
上下文中遍历并find()
所有子s
,但不要下降到嵌套的
。
所以我需要一个jQuery技巧
-
将find()
某个元素的所有子元素
-
将在DOM树中下降n级
-
但是如果遇到某个元素(
)会停止下降,这样选择器就不会选择嵌套表的输入(将单独处理)
-
可以有任意数量的嵌套
级别,因此无论在$(“#first”)
或任何其他
范围内遇到多少个父
或children
,解决方案都应该有效
我检查了其他jQuery发现直到问题。 他们有答案,但似乎他们没有填写最后的标准
我在另一个问题上遇到了类似的问题 。 我最终在与一些人试图想到一个找到选择器来回来之后终于搞清楚了一个插件。
用法: ExclusiveInputs = $('#first').findExclude('input','table');
// Find-like method which masks any descendant // branches matching the Mask argument. $.fn.findExclude = function( Selector, Mask, result){ // Default result to an empty jQuery object if not provided var result = typeof result !== 'undefined' ? result : new jQuery(); // Iterate through all children, except those match Mask this.children().each(function(){ var thisObject = jQuery( this ); if( thisObject.is( Selector ) ) result.push( this ); // Recursively seek children without Mask if( !thisObject.is( Mask ) ) thisObject.findExclude( Selector, Mask, result ); }); return result; }
(简明版) :
$.fn.findExclude = function( selector, mask, result ) { var result = typeof result !== 'undefined' ? result : new jQuery(); this.children().each( function(){ var thisObject = jQuery( this ); if( thisObject.is( selector ) ) result.push( this ); if( !thisObject.is( mask ) ) thisObject.findExclude( selector, mask, result ); }); return result; }
更新:让我们再来一次。
基本上,您希望匹配作为#first
后代的所有
元素,而不是
元素的子元素,这些元素嵌套在#first
下的多个深层。
(我不确定under #first
部分的最后一部分,但实现它允许我们支持祖先链中#first
之上的
元素。)
从技术上讲,以下选择器应该满足您的要求:
var inputs = $("#first td:not(#first td td) > input");
如果这在你的浏览器中不起作用(Sizzle应该完成我认为的任务,但复杂的选择器如:not()
总是很棘手),你可以将处理委托给jQuery方法:
var inputs = $("#first td").not("#first td td").children("input");
原始答案如下:
您可以使用not()来排除具有多个
祖先的
元素:
var firstLevelCells = $("#first").find("input").not("td td input");
呃,我有一个更好的主意..
var badTable = "table.bad"; //the one you want to avoid var $goodInputs = $("#first").find('input').filter(function() { return $(this).closest(badTable).length == 0; });
这对你来说可能是也可能不够快。 这取决于你不想谈论的DOM;)
如果它很慢,只需手动编写算法代码即可。 没有选择器快捷方式。
我有一个类似的问题,仍然面临着没有扩展循环或具有DOM的确切结构的事情的挑战。 在我的情况下,我已经引用了元素’#first’,如果你不这样做,我们就可以得到它,例如每个(即使它只是一个对象)。 诀窍是使用parentsuntil返回树,并停在顶部元素以查看是否有任何满足条件的中间元素。
对函数使用简写lambda表示法(因为你可以在typescript中编写),这将导致:
$('#first').each((idx, f) => $(f).find('input').filter((idx2, inp) => $(inp).parentsUntil(f, 'table').length == 0)
它可能不是最有效的方式(因为你首先选择所有内容然后通过再次安装DOM树来丢弃元素,但它是紧凑的并且相当通用。