jqueryの要素の子要素の配列を取得する方法

Question

Heres my要素、それらをループすることで子要素を配置する必要があります。

<div id="animDummy1"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

私はコードが（見えるが子供べきで想像どのように相続人）、当然のことながら、子の配列を返しません

var children=$('#animDummy1').children(); 
for(var i=0;i<children.length;i++){ 
    children[i].css('left',i*120+'px'); 
} 

質問 - 私はで使用するための子どもの配列を取得することができますループ？私は子供のそれぞれが実行される機能を付け加えることができると知っていますが、そこでは "i"が増えるのでしょうか？

Thnx。

Answer 1

children() DOMノードの配列に似ている子のjQueryオブジェクトを返します。あなたの問題はループ内にあります。[]で個々のオブジェクトにアクセスすると、cssメソッドを持たないプレーンなDOMノードが返されます。 .eq(i)または$(children[i])を使用してください。

また、each()メソッドを使用するだけで、forループを手作業で記述しなくても同じことができます。ドキュメントを読んで、コールバック内の要素のインデックスを取得する方法を確認してください。

Answer 2

これは正しい方法です。

var children=$('#animDummy1').children(); 

children.each(function(idx, val){ 
    $(this).css('left',idx*120+'px'); 
}); 

実際にはこれが優れています。

$('#animDummy1').children().each(function(idx, val){ 
    $(this).css('left',idx*120+'px'); 
}) 

Answer 3

これは、jQueryのオブジェクトのセットを返し、children[i(anyNumber)]は、DOM要素を返します

$(document).ready(function(){ 

    var children = $('#animDummy1').children();   

    $(children).each(function(index, item){     
     console.log(index);    
    });   
}); 

jsFiddle Example

Answer 4

children()私のために正常に動作します。したがって、dom要素のcss jQueryメソッドを呼び出すとエラーが発生します。特定のインデックスの特定の要素にアクセスする場合は、eqメソッドを使用する必要があります。これを試して。

var children = $('#animDummy1').children(); 
for(var i = 0;i < children.length;i++){ 
    children.eq(i).css('left', (i*120+'px')); 
} 

.eq()参照：http://api.jquery.com/eq/

Answer 5

多くのjQueryのメソッドは、あなたが割り当てたい新しい値の代わりに関数を直接渡すことができます。

ご例えば...

$('#animDummy1').children().css('left', function(i, curr_left) { 
    return i * 120; 
}); 

---

だからここに私は.children()セットに直接.css()と呼ばれ、代わりに'left'値の数を、私は機能を与えました。

関数は各要素に対して1回呼び出されます。パラメータは、現在の反復のインデックスと、反復中の現在の要素の現在のCSS値を表します。

return関数の値は、現在の要素に設定する値として使用されます。

Answer 6

jQueryのchildren().each()を使用する他の回答は、ほとんどの場合役に立ちそうです。あなたは、実際のjavascript配列が必要です場合は、次の操作を実行できます。

var childrenArray = $('#animDummy1').children().toArray(); 

これは、ループ内またはパラメータとして配列を必要とする他の機能で使用するために、実際の配列を持つことが可能になります。

Answer 7

$(function() { 
     var sortOrder = [3, 4, 1, 5,2]; 
     var onLoad = $('#parentDiv>p').get(); 
     for (var i = 0; i < onLoad.length; i++) { 
      var inRearranging = $('#parentDiv>P').get(); 
      var orderingID = "#paragraph" + sortOrder[i]; 
      $(orderingID).insertBefore("#" + inRearranging[i].id); 
     } 
    }); 



<div id="parentDiv"> 
    <p id="paragraph1">1</p> 
    <p id="paragraph2">2</p> 
    <p id="paragraph3">3</p> 
    <p id="paragraph4">4</p> 
    <p id="paragraph5">5</p> 
</div> 

Answer 8

利用のjQuery：

.each（）$（ '＃のSomeObjectの'）の子供を持つ配列の各インデックスに許可します：

$('#animDummy1').each(function(index, item) { 
    // Do Something with each $(item) children of #animDummy with index 
});