0

我正在尝试使用 .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>

查询

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/

4

3 回答 3

0

从 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);
}
于 2013-05-10T18:46:34.687 回答
0

小提琴演示

这样做>>

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

于 2013-05-10T18:51:55.413 回答
0

jsFiddle Demo

您需要做的是在检查图像宽度时引用父节点而不是每个元素。您也不需要使用变量来有条件地应用它，只需对每个项目执行此操作

$('ul li img').each(function () {
 var itemWidth = $(this).width();
 $(this.parentNode).css( "width", itemWidth );
});
于 2013-05-10T18:54:00.200 回答