Добавить несколько значений с .each()

Question

Я пытаюсь использовать .each() для запуска через DOM и создания нескольких переменных в зависимости от высоты определенного набора элементов. Скажем, ширина всех изображений в списке.

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

HTML

<ul> 
    <li><img src="image_01.jpg" width="100" /></li> 
    <li><img src="image_02.jpg" width="60" /></li> 
    <li><img src="image_03.jpg" width="220" /></li> 
    <li><img src="image_04.jpg" width="40" /></li> 
</ul> 

Jquery

var itemWidth = 0; 
$('ul li img').each(function() { 
    var tmpWidth = $(this).width(); 

    if (tmpWidth > itemWidth) { 
     itemWidth = (tmpWidth); 
     elemWidth = $('ul li').width(); 
     $('ul li').css("width", itemWidth); 

    } 
}); 

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

Нужно ли создать цикл for с массивом для хранения нескольких переменных, соответствующих каждой ширине?

вот пример на скрипке: http://jsfiddle.net/EBMM2/

Answer 1

То, что вы хотите изменить, начиная с IMG, является ограждающим li элементом. Вы можете получить его с помощью $(this).closest('li').

Изменить

var tmpWidth = $(this).width(); 
if (tmpWidth > itemWidth) { 
    itemWidth = (tmpWidth); 
    elemWidth = $('ul li').width(); 
    $('ul li').css("width", itemWidth); 
} 

в

var imgWidth = $(this).width(); 
var elem = $(this).closest('li'); 
if (imgWidth>elem.width()) { 
    elem.css("width", imgWidth); 
} 

Answer 2

Fiddle Demo

ли это так >>

$('ul li img').each(function() { 
    var itemWidth = $(this).width(); 
    $(this).parent().css("width", itemWidth); 
}); 

Когда вы делали это таким образом $('ul li').css("width", itemWidth);, вы устанавливаете всю ширину li в этом коде, измените ее на $(this).parent().css("width", itemWidth);, и она будет работать нормально.

Answer 3

jsFiddle Demo

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

$('ul li img').each(function() { 
var itemWidth = $(this).width(); 
$(this.parentNode).css("width", itemWidth); 
});