Làm thế nào để lặp qua trẻ em bị cho vòng

Question

Tôi muốn để lặp qua tất cả Childs của giá trị trả về của một jQuery .children(), như thế này:

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
    childs__.foo(); 

Tôi phải làm gì để viết trong 3 dòng thay vì __, để tiếp cận đứa trẻ thứ i?

Tôi muốn điều này becaus Tôi muốn truy cập (i-1) -thứ và (i + 1) con -thứ trong vòng lặp, như thế này:

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    childs<<i>>.css('height', childs<<i - 1>>.height()); 
    childs<<i>>.css('width', childs<<i + 1>>.width()); 
} 

Vì vậy, tôi giả định each() chức năng sẽ không làm việc.

Answer 1

childs là javascript array. Vì vậy, bạn truy cập các đối tượng trong mảng bằng childs[indexOfElement]. Trong trường hợp của bạn childs[i].

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
    childs[i].foo(); 

và

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    childs[i].css('height', childs[i-1].height()); 
    childs[i].css('width', childs[i+1].width()); 
} 

NHƯNG: Mã của bạn có lỗi. Phần tử từ bộ sưu tập trẻ em KHÔNG phải là một đối tượng jQuery. Nó chỉ là một phần tử DOM. Vì vậy, bạn phải bọc chúng trong $(...) để sử dụng các hàm jQuery. Vì vậy, mã của bạn sẽ trở thành:

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    var thisElement = $(childs[i]); 
    var next = $(childs[i+1]); 
    var prev = $(childs[i-1]); 
    thisElement.css('height', prev.height()); 
    thisElement.css('width', next.width()); 
} 

PS. Nó phải được đặt tên là children. :)

Answer 2

Nó sẽ không dễ dàng hơn với bộ chọn này http://api.jquery.com/nth-child-selector/?

Answer 3

Bạn có thể sử dụng hàm each() và sử dụng "this" để lấy đối tượng hiện tại. Sau đó, bạn có thể sử dụng các hàm next() và prev() thay cho i + 1 và i-1 tương ứng. Tôi đã không kiểm tra mã để nó có thể hoặc có thể không hoạt động; hy vọng chỉ trong đúng hướng :)

jQuery.each($element.children(), function() { 
{ 
    $(this).css('height', $(this).prev().height()); 
    $(this).css('width', $(this).next().width()); 
} 

Answer 4

Chức năng each() sẽ làm việc, hãy xem này:

$('#something').children().each(function(index) { 

    $(this).css('width', (parseInt($(this).css('width').replace('px', '')) + index) + "px"); 

    // to access the previous and next element: 
    $(this).prev().css('width', '100px'); 
    $(this).next().css('width', '200px'); 

}); 

Điều đó sẽ thay đổi chiều rộng, thêm các chỉ số như một điểm ảnh trên mỗi lần lặp - chỉ để giới thiệu cách lấy chỉ mục.

Answer 5

Sử dụng .eq() để nhận được chỉ số tại chỉ mục được chỉ định của các phần tử dom phù hợp được đặt.

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    childs.eq(i).css('height', childs.eq(i - 1).height()); 
    childs.eq(i).css('width', childs.eq(i + 1).width()); 
} 

và cách tiếp cận khác đơn giản là để đạt được điều này mà không cần sử dụng vòng lặp .each()

jQuery.each($element.children(), function() { 
{ 
    $(this).css('height', this.prev().height()); 
    $(this).css('width', this.next().width()); 
}