用.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

小提琴演示

这样做>>

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