如何使用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());
}