5

解決済み（一種）

さて、私は以下を使用してそれを解決したと思います（エッジケースを除く）：

function findByDepth(parent, child, depth){
    var children = $();
    $(child, $(parent)).each(function(){
        if($(this).parentsUntil(parent, child).length == (depth - 1)){
            children = $(children).add($(this));
        }
    });
    return children;
}

// this would successfully return the 3.X elements of an HTML snippet structured
// as my XML example, where <parent> = #parent, etc.
var threeDeep = findByDepth('#parent', '.child', 3);

しかし、誰かがここで受け入れられた答えを得る必要があります、そして私はそれを自分で答えるつもりはなく、あなたのよく稼いだ担当者を棄権します。したがって、この関数を最適化するための洞察を提供するなど、誰かが何かを追加したい場合は（私が行く前に$.extend()）、あなたの答えを正しいとマークします。そうでない場合は、最初の質問の最初の人をマークすることに戻ります。

ちなみに、フィドルで確認してください：http: //jsfiddle.net/5PDaA/

サブアップデート

@CAFxXの答えをもう一度見てみると、彼のアプローチはおそらくより高速であり、querySelectorAllそれが可能なブラウザーを利用していることがわかりました。とにかく、私は彼のアプローチを次のように修正しました、それでもそれは私にガフを与えています：

$.fn.extend({
    'findAtDepth': function(selector, depth){
        var depth = parseInt(depth) || 1;
        var query = selector;
        for(var i = 1; i < depth; i++){
            query += (' ' + selector);
        }
        return $(query, $(this)).not(query + ' ' + selector);
    }
});

最初は正常に動作しますが、コンテキストがで見つかった要素に変更されると、selector何らかの理由で失敗します。

アップデート

さて、私は愚かにも不明確で、私がしていることの仕様について知らされていませんでした。実装を確認したので、ここで更新します。人々が私をとても無償で更新するのはばかだと思っているので（私はあなたを責めません）、私の最初の要件を満たす最も早い答えをマークしますが、以下の私のボーナスの言及は本質的に要件です。別の質問を投稿しますが、重複によって閉鎖される可能性があります。とにかく、あなたの忍耐のために+1があります：

特定の子の深さの指定が必要です（関数でラップされている場合など）。したがって、子と、同じようにネストされた（必ずしも兄弟である必要はない）一致する要素を分離します。

たとえば（簡潔にするためのXML）：

<!-- depth . sibling-index-with-respect-to-depth -->

<parent>
    <child>                     <!-- 1.1 -->
        <child>                 <!-- 2.1 -->
            <child>             <!-- 3.1 -->
                <child></child> <!-- 4.1 -->
            </child>            
            <child>             <!-- 3.2 -->
                <child></child> <!-- 4.2 -->
            </child>            
        </child>                
        <child>                 <!-- 2.2 -->
            <child></child>     <!-- 3.3 -->
        </child>                
    </child>                    
</parent>

指定された深さを指定すると2、すべての2.X要素が選択されます。4すべてを考えると4.X、など。

元の質問

jQueryのネイティブ機能を使用して、セレクターに一致する「第1世代」の子孫のみを選択する方法はありますか？例えば：

注：以下は単なる例です。.child要素は、任意のレベルで親にネストされます。

ボーナス：以下に提案する構文が示すように、選択範囲が通過する深さを指定する方法を提供する答えは信じられないほどです。

// HTML
<div id="parent">
    <div>
        <div class="child"> <!-- match -->
            <div>
                <div class="child"> <!-- NO match -->
                </div>
            </div>
        </div>
        <div class="child"> <!-- match -->
            <div>
                <div class="child"> <!-- NO match -->
                </div>
            </div>
        </div>
    </div>
</div>

と：

// jQuery
$('#parent').find('.child:generation(1)'); // something in that vein

のコンテキストから選択しようとすると#parent、jQuery:firstは最初に一致したにのみヒットするため、ここでは機能しません.child。

4

3 に答える 3

2

これを試してください（KISS！）：

$("#parent .child").not(".child .child");

編集：2番目のレベルを取得するには：

$("#parent .child .child").not(".child .child .child");

第3：

$("#parent .child .child .child").not(".child .child .child .child");

など...あなたが（テストされていない）持つことができるように：

function findChildrenDeepDown(parentSelector, level) {
  level = parseInt(level);
  var firstSelctor = parent, notSelector = ".child", i;
  for (i=0; i<level; i++) {
    firstSelector += " .child";
    notSelector += " .child";
  }
  return $(firstSelector).not(notSelector);
}

findChildrenDeepDown("#parent", 3); // find third-level children of #parent
于 2011-09-17T06:09:13.387 に答える
1

あなたはこのようにそれを得ることができます：

$("#parent").find(">div>.child")

編集

最初の子がランダムな深さにいる可能性がある場合は、次を使用できます

$("#parent").find(".child").siblings();
于 2011-09-17T06:06:16.477 に答える
1

.child一般に、すべての要素を見つけてから、.child祖先を持つ要素を破棄する必要があると思います。

$('#parent .child').filter(function() {
    return $(this).parent().closest('.child').length == 0;
});

ただし、これは次のようなことを処理しません。

<div id="parent">
    <div class="child"> <!-- match -->
        <div>
            <div class="child"> <!-- NO match -->
            </div>
        </div>
    </div>
    <div>
        <div>
            <div class="child"> <!-- NO match wanted but it will match -->
            </div>
        </div>
    </div>
</div>

しかし、HTMLの構造にはおそらくそれで十分でしょう。

于 2011-09-17T06:15:13.197 に答える