12

我有一个嵌套表结构，例如

   <table>

       <td id="first">

           <div class="wrapper">
               <input name=1>
           </div>

           <input name=2>

           <table>

               <td id="second">

                   <input name=3>

我有 jQuery 选择$("#first")。我想遍历这个上下文中的find()所有孩子，但不想下降到嵌套的 s 中。<input>s<td><table>

所以我需要一个 jQuery 技巧

  • 将find()某个元素的所有子元素

  • 将在 DOM 树中下降 n 级

  • 但是如果遇到某个元素 ( <table>) 将停止下降，因此选择器不会选择嵌套表的输入（将单独处理）

  • 可以有任意数量的嵌套级别，因此无论在 $("#first")或任何其他范围内遇到<table>多少父级<table>或子级，该解决方案都应该有效<table><td><td>

我检查了其他 jQuery 查找直到问题。他们有答案，但似乎没有满足最后一个标准

4

4 回答 4

5

我在另一个问题中遇到了类似的问题。在与一些试图寻找查找选择器的人来来回回之后，我最终自己找出了一个插件。

用法 ： 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;
}
于 2014-06-16T19:00:25.973 回答
3

更新：让我们来看看这个。

基本上，您希望匹配所有<input>嵌套在.#first<td>#first

（我不确定最后under #first一部分，但实现它允许我们支持祖先链中的<td>元素#first。）

从技术上讲，仅以下选择器就可以满足您的要求：

var inputs = $("#first td:not(#first td td) > input");

如果这在您的浏览器中不起作用（我认为 Sizzle 应该可以完成任务，但复杂的选择器:not()总是很棘手），您可以将处理委托给 jQuery 方法：

var inputs = $("#first td").not("#first td td").children("input");

原答案如下：

您可以使用not()排除<input>具有多个<td>祖先的元素：

var firstLevelCells = $("#first").find("input").not("td td input");
于 2012-11-09T10:01:42.803 回答
2

嗯，我有个更好的主意..

var badTable = "table.bad"; //the one you want to avoid
var $goodInputs = $("#first").find('input').filter(function() {
    return $(this).closest(badTable).length == 0;
});

这对您来说可能不够快，也可能不够快。这取决于您不想谈论的 DOM ;)

如果它很慢，只需手动为您的算法编写代码。没有选择器快捷方式。

于 2012-11-09T09:45:28.227 回答
1

我有一个类似的问题，并且仍然面临着在没有扩展循环或具有 DOM 的确切结构的情况下做某事的挑战。在我的例子中，我已经引用了元素“#first”，如果你不这样做，我们可以通过 each 来获取它（即使它只是一个对象）。诀窍是与 parentsuntil 一起回到树上并停在顶部元素处，看看是否有任何中间元素满足条件。

使用函数的简写 lambda 表示法（如您可以在 typescript 中编写的那样），这将导致：

$('#first').each((idx, f) => $(f).find('input').filter((idx2, inp) => $(inp).parentsUntil(f, 'table').length == 0)

它可能不是最有效的方法（因为您首先选择所有内容，然后通过再次安装 DOM 树来丢弃元素，但它是紧凑且相当通用的。

于 2016-07-05T09:30:27.780 回答