Как перебрать детей с помощью цикла for - PullRequest
Новая
       19

Как перебрать детей с помощью цикла for

10 голосов
/ 22 марта 2012

Я хочу перебрать все дочерние элементы возвращаемого значения 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() не будет работать.

Ответы [ 5 ]

15 голосов
/ 22 марта 2012

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

НО : в вашем коде есть ошибка. Элемент из дочерней коллекции НЕ является объектом 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. :)

2 голосов
/ 22 марта 2012

Вы можете использовать функцию 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());
}
2 голосов
/ 22 марта 2012

Не проще ли с этим селектором http://api.jquery.com/nth-child-selector/?

1 голос
/ 22 марта 2012

Используйте .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());
}
1 голос
/ 22 марта 2012

Функция 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');

});

Это изменит ширину, добавив индекс в виде пикселя на каждой итерации - просто для демонстрации того, как получить индекс.

...