如何使用for循環遍歷子項

Question

我想迭代jQuery的.children()返回值的所有子節點，如下所示：

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

為了訪問第i個孩子，我需要在3行而不是__寫什么？

我想要這個因為我想要在循環中訪問第（i-1）個和第（i + 1）個孩子，如下所示：

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());
}

所以我假設each()函數不起作用。

Answer 1

childs是一個javascript數組 。 因此，您可以通過childs[indexOfElement]訪問數組中的對象。 在你的情況下childs[i] 。

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

和

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());
}

但是 ：您的代碼有錯誤。 children集合中的元素不是jQuery對象。 它只是一個DOM元素。 所以你必須將它們包裝在$(...)以使用jQuery函數。 所以你的代碼將成為：

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。 它應該被命名為children 。 :)

Answer 2

使用這個選擇器http://api.jquery.com/nth-child-selector/會不會更容易？

Answer 3

您可以使用each（）函數，並使用“this”來獲取當前對象。 然后你可以分別使用next（）和prev（）函數代替i + 1和i-1。 我沒有測試過代碼，所以它可能會或可能不會工作; 希望指向正確的方向:)

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

Answer 4

each()函數將起作用，看看這個：

$('#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');

});

這將修改寬度，在每次迭代時將索引添加為像素 - 只是為了演示如何獲取索引。

Answer 5

使用.eq（）獲取匹配的dom元素集的指定索引處的那個。

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());
}

另一個簡單的方法是在沒有循環使用的情況下實現這個.each（）

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