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

这样做＆gt;＆gt;

$('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 );并且它将正常工作。< / p>

Answer 3

的 jsFiddle Demo 的

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

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

使用.each（）添加多个值

3 个答案: