使用.each（）添加多個值

我試圖使用.each（）來運行DOM，並根據一組元素的高度創建多個變量。讓我們說一個列表中所有圖像的寬度。使用.each（）添加多個值

在這個簡化的例子中，我想根據列表項所包含的圖像的寬度將寬度添加到無序列表中的每個列表項。這樣，列表項的寬度將等於內部圖像的寬度。

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/

來源

2013-05-10 zer0ruth

檢查與腳本 http://jsfiddle.net/btYkH/ – ram2013 2013-05-10 18:51:16

提交前請檢查您的問題，在那段時間改變它時很難輸入答案...... – 2013-05-10 18:52:12

你想改變，從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-10 18:46:34

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);，它會正常工作。

來源

2013-05-10 18:51:55

jsFiddle Demo

你需要做的是參考父節點，而不是當你檢查圖像的寬度每一個元素。你也不需要使用一個變量來有條件地應用此，只是把它做的每一個項目

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

來源

2013-05-10 18:54:00

使用.each（）添加多個值

回答

相關問題