làm thế nào để có được mảng con của một phần tử trong jquery

Question

Heres yếu tố của tôi, tôi muốn sắp xếp các trẻ em bên trong nó bằng cách lặp qua chúng.

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

Heres làm thế nào tôi tưởng tượng mã nên nhìn nhưng trẻ em(), tất nhiên, không trả lại một mảng của những đứa trẻ

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

Câu hỏi đặt ra - tôi có thể nhận mảng trẻ em để sử dụng trong một vòng lặp? Tôi biết tôi có thể đính kèm một chức năng cho mỗi trẻ em được thực hiện trên, nhưng tôi có thể nhận được rằng tăng "i" trong đó?

Thnx.

Answer 1

children() trả về đối tượng jQuery của trẻ tương tự như một mảng nút DOM. Vấn đề của bạn nằm trong vòng lặp - khi bạn truy cập các đối tượng riêng lẻ với [], bạn lấy lại các nút DOM đơn giản không có phương thức css. Sử dụng .eq(i) hoặc $(children[i]).

Hoặc chỉ sử dụng phương pháp each(), cho phép bạn làm như vậy mà không phải viết vòng lặp for bằng tay. Đọc tài liệu để tìm hiểu cách lấy chỉ mục của phần tử bên trong hàm gọi lại.

Answer 2

Đây là cách chính xác.

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

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

hoặc thực sự điều này là tốt hơn.

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

Answer 3

này hoạt động tốt đối với tôi

$(document).ready(function(){ 

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

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

jsFiddle Example

Answer 4

children() trả về một tập các đối tượng jQuery và children[i(anyNumber)] sẽ trở lại các yếu tố dom. Vì vậy, gọi css Phương thức jQuery trên phần tử dom sẽ thông qua lỗi. Bạn nên sử dụng phương pháp eq nếu bạn muốn truy cập bất kỳ phần tử cụ thể nào tại một chỉ mục nhất định. Thử cái này.

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

.eq() tham khảo: http://api.jquery.com/eq/

Answer 5

Nhiều phương pháp jQuery cho phép bạn vượt qua một chức năng trực tiếp ở vị trí của giá trị mới mà bạn muốn gán.

Ví dụ bạn ...

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

---

Vì vậy, ở đây tôi gọi là .css() trực tiếp trên bộ .children(), và thay vì một số cho giá trị 'left', tôi đã đưa ra một chức năng.

Hàm được gọi một lần cho mỗi phần tử. Các tham số đại diện cho chỉ mục của phép lặp hiện tại và giá trị css hiện tại của phần tử hiện tại trong phép lặp.

Giá trị return của hàm sẽ được sử dụng làm giá trị để đặt trên phần tử hiện tại.

Answer 6

Các câu trả lời khác để sử dụng jQuery children().each() có thể hữu ích cho hầu hết các trường hợp. Tuy nhiên, nếu bạn cần một mảng javascript thực tế, bạn có thể làm như sau:

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

này sẽ cho phép bạn có một mảng thực để sử dụng trong một vòng lặp hoặc với các chức năng khác đòi hỏi phải có một mảng như một tham số.

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

Use jQuery:

.each() get allow to each index of array with childrens of $ ('# someObject'):

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