如何使用for循环迭代子元素

Question

我想遍历 jQuery 的 .children() 返回值的所有子元素，就像这样：

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

在第三行中，我该写什么来访问第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() 函数不会起作用。

- user1027167

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

BUT：你的代码有一个错误。子元素集合中的元素不是 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());
}

顺便提一句，它应该被命名为children。:)

- Strelok

---

请确保说明清楚，此时 OP 将访问纯 DOM 节点，而不是 jQuery 对象。 - jAndy

@jAndy 是的，我自己刚刚也意识到了，在重新阅读并更新了答案之后。谢谢！ - Strelok

严格来说，jQuery对象不是一个数组，它是类似于数组的对象。 - Felix Kling

Answer 2

你可以使用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());
}

- turpachull

Answer 3

如果使用这个选择器http://api.jquery.com/nth-child-selector/，会不会更容易一些呢？

- slash197

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');

});

这将修改宽度，在每次迭代中将索引作为像素添加-仅演示如何获取索引。

- MrCode

---

那么在循环中如何访问第(i-1)个和第(i+1)个子元素？ - user1027167

我已经更新了答案，展示了如何使用 .prev() 和 .next()。 - MrCode

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

另一个简单的方法是在不使用for循环的情况下实现这一点，可以使用.each()。

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

- Niranjan Singh

---

正如pimvdb所说，它被称为".prev"。但是因为eq很好用，所以加上+1。 - user1027167

这不是一个jQuery对象，因此不存在.css()。应该使用$(this).css()。 - MrCode