Question

我想这是一个非常简单的问题。

我想给我的li-tags一个与其里面的图像相匹配的宽度。到目前为止，我正在为每个人获得正确的图像属性。

$("#slider1 li img").each(function(){
 var imageWidth = $(this).width();
 var imageHeight = $(this).height();    
 $(this).attr('width', imageWidth);
 $(this).attr('height', imageHeight);
});

但我似乎无法弄清楚我如何将imageWidth转移到我的li-tag。我尝试过：

$("#slider1 li").css("width", imageWidth);

但是，这只是为所有li提供相同的宽度。

感谢您提供帮助：）

编辑：我的标记：

<ul id="slider1"> 
<li><img src="tester.jpg"/></li> 
<li><img src="tester2.jpg"/></li> 
<li><img src="tester3.jpg"/></li> 
<li><img src="tester4.jpg"/></li> 
<li><img src="tester.jpg"/></li> 
<li><img src="tester2.jpg"/></li>
</ul>

Answer 1

您可以直接调用包含li元素的父img，如下所示：

$(this).parent('li').css('width',imageWidth);

注意：仅当img仅在li下方的一个级别时才有效。否则，请改用.closest('li')。 parent只会遍历一个级别，而closest将继续遍历DOM树，直到找到指定的元素。

Answer 2

你应该这样做：

 $(this).closest('li').css("width", imageWidth);

像这样

$("#slider1 li img").each(function(){
 var imageWidth = $(this).width();
 var imageHeight = $(this).height();    
 $(this).attr('width', imageWidth);
 $(this).attr('height', imageHeight);
 $(this).closest('li').css("width", imageWidth);
});

Answer 3

$("#slider1 li img").each(function(){
    var imageWidth = $(this).width();
    var imageHeight = $(this).height();    
    $(this).parent().attr('width', imageWidth);
    $(this).parent().attr('height', imageHeight);
});

Answer 4

这是因为您用于设置'#slider1 li'宽度的选择器正在同时设置它们（无论最后一个imageWidth是什么）。您只需设置.parent()宽度。

使用jquery .each（）获取属性并使用as样式

4 个答案: