2011-07-05 39 views
13

はのは、私は(ポイントまたは)、このような構造を有しているjQueryオブジェクトがあるとしましょうjQueryのは、子供や孫を取得

['parent', 'child1', 'child2', ..., 'grandchild1', ...] 

おかげ

PS:このような私はすでに JQueryオブジェクトを持っているので、この$( 'div> div')のようなセレクタにはなり得ないことに注意してください。

+0

「...要素の抽象的な配列(JQueryオブジェクト)を取得しています...」ということを知りたいのは興味深いです。どちらをお望みでしたか?配列、またはjQueryオブジェクト? – user113716

+0

jQueryオブジェクトは実際には配列ですか?私は、親要素とすべてのネストされた要素を取得することを意味しました – megas

+0

いいえ、jQueryオブジェクトは、Arrayのようなオブジェクトと呼ばれることもありますが、実際の配列ではありません。 – user113716

答えて

17

あなたは*セレクタを使用して子供や孫を取得することができます。アイテムはツリー順に返されます。その後、jQuery.toArray()を使用して要素のプレーンな配列を取得することができます

$(function() { 
 
    var a = $("#wrapper").find("*").toArray(); 
 
    console.log(a); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 
    <div id="parent"> 
 
    <div id="child1"> 
 
     <div id="grandchild1"> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     </div> 
 
    </div> 
 
    <div id="child2"> 
 
     <div class="level-3"></div> 
 
     <div class="level-3"></div> 
 
     <div class="level-3"></div> 
 
     <div class="level-3"> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

後あなたは再帰を使用して階層を反復で、より興味を持っている場合は行き過ぎが、便利です。

function recursiveIterate($node, array) { 
 
    $node.children().each(function() { 
 
    array.push(this); 
 
    recursiveIterate($(this), array); 
 
    }); 
 
} 
 
$(function() { 
 
    var a = []; 
 
    recursiveIterate($("#wrapper"), a); 
 
    console.log(a); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 
    <div id="parent"> 
 
    <div id="child1"> 
 
     <div id="grandchild1"> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     </div> 
 
    </div> 
 
    <div id="child2"> 
 
     <div class="level-3"></div> 
 
     <div class="level-3"></div> 
 
     <div class="level-3"></div> 
 
     <div class="level-3"> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     <div class="level-4"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

recursiveIterate関数は非常に役に立ちます。なぜなら、再帰がうまくいかないからです。 – megas

+0

@megas:最初の例は、* flat *配列を返します。配列の配列を作成するのに使用することができます(デモンストレーションされていません)。 –

6

toArray()[docs]メソッドを使用すると、jQueryオブジェクトを配列にできます。

var arr = my_obj.toArray(); 

...またはget()[docs]メソッドに引数を渡さない場合は、このメソッドを使用します。

var arr = my_obj.get(); 

私が誤解してきた、とあなたは、構造体のルートを指している、とfind()[docs]メソッドメソッドを使用し、その子孫を取得する必要がある場合。

var descendants = my_obj.find('div'); 

あなたが特定のポイントからDOM構造を回避しましょうjQueryのhas many traversal methods。あなただけは子供や孫、そしてより深い何を望んでいた場合


、次の操作を行います。

var two_generations = my_obj.find('> div > div'); 

これは、あなただけ2世代深いdiv要素を提供します。

あなたはこれを行う、div要素にそれを制限したくない場合は、次の

var two_generations = my_obj.find('> * > *'); 
+0

そして、あなたは '$( 'parent、parent *')。toArray()'を意味すると信じていますか? –

+0

@patrick dw、これは子供と孫ももらうのだろうか? –

+0

@ kmb385:質問のタイトルとテキストが少し同期していないように見えますが、OPが実際には特定のノードのみを参照していて、セット全体ではない場合に備えて回答を更新しました。 – user113716

0

こんにちは私はここでかなり新しいです。私は同じような脳のおならを持っていました。孫を手に入れるために、私は孫を使うことを勧めます。children()アプローチ:

$('#parent') //selects the parents 
$('#parent').children() //selects the children 
$('#parent').children().children() //selects the grandchildren 
関連する問題