Question

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

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

我需要在3行而不是__写一下才能访问第i个孩子？

我想要这个因为我想要在循环中访问第（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 array。因此，您可以通过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());
}

如何使用for循环遍历子项

5 个答案: