Использование jQuery для получения ширины каждого элемента в списке - PullRequest
3 голосов
/ 01 февраля 2011

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

Вот мой код:

    var listWidth = $('ul li').each(function(){
        return $(this).width();
    });

    console.log(listWidth);

Ответы [ 3 ]

7 голосов
/ 01 февраля 2011

Вместо этого используйте метод map() (документы) для возврата значений в объект jQuery, затем get() (документы) метод преобразования его в массив.

var listWidth = $('ul li').map(function(){
    return $(this).width();
}).get();

или аналогичным образом, вы можете использовать метод jQuery.map() (документы) , который возвращает массив.

var listWidth = $.map($('ul li'),function(val){
    return $(val).width();
});
3 голосов
/ 01 февраля 2011

Вы можете получить их, отправив значения в массив также:

var listWidth = [];
$('ul li').each(function() {
    listWidth.push($(this).width());
});

console.log(listWidth);

Вот пример.

0 голосов
/ 01 февраля 2011

Так как у вас будет несколько элементов списка, вы можете создать массив ширины по ходу дела:

var listWidth = [];
$('ul li').each(function(){
    listWidth.push($(this).width());
});

console.log(listWidth);

Или вместо этого вы можете создать объект с шириной:

var listWidth = {};
$('ul li').each(function(){
    listWidth[$(this).attr('id')] = $(this).width();
});

console.log(listWidth);

В этом примере создается объект, который содержит идентификатор тега и его ширину ({ id1: width, id2: width, etc...}, при условии, что у каждого тега есть идентификатор).

Приведенный вами пример кода имел проблему с тем, что при возвратеwidth, он возвращал ее функции каждой (которая, вероятно, просто отбросила ее), но listWidth было возвращаемым значением функции каждой , а не анонимной функции внутри (так, поскольку каждая функция возвращает объект jQuery, это то, что было назначено для listWidth).

...