獲取（計算）具有動態寬度的多個元素的總寬度

所以我有一個李的列表包裹在ul。

<ul class="ulclass"> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="600px_wide.jpg"/> 
    </li> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="800px_wide.jpg"/> 
    </li> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="300px_wide.jpg"/> 
    </li> 
</ul>

每個利元件內

有一個按鈕，點擊李時將擴大到嵌套圖像的寬度。因此，如果圖像寬度爲800px，則li將相應地展開。

現在情況是我想要動態計算所有li的總寬度。現在我使用的是這樣的：

$(li).each(function() { 
totalWidth += parseInt($(this).width()); 
});

這將讓所有的李的寬度是在頁面加載。但擴大後說一里寬度值不變。 我想要擴展/收縮李的一個事件監聽器可能會改變總寬度？在回調等方面，我真的很新穎。所以我希望至少有一些指導。也許這是不可能的...

我感謝所有幫助！謝謝

來源

2012-01-15 Sebastian Graz

您可以簡單地調用這個代碼，每次擴展或收縮li時計算寬度。除非你有大量的li元素，否則將它們全部加回去的表現應該不會太差。

來源

2012-01-16 00:02:35

我會有約10-20裏不知道它是否被認爲是很多表現。另外我想盡可能保持代碼的清潔。 – 2012-01-16 17:43:02

詹姆斯的答案很好，但取決於讀取值的頻率/數量，您可能更喜歡在需要值時調用該代碼。因此，而不是someDependentFunction(totalWidth)，你會someDependentFunction(totalWidth())，其中totalWidth是：

function totalWidth = new function() { 
    var total = 0; 
    $(li).each(function() { 
     total += parseInt($(this).width()); 
    }); 
    return total; 
}

正如詹姆斯所說，如果你擔心調用$（LI）的性能，那麼如果它像YUI相當於什麼會首次調用後緩存結果，所以它真的不應該太多。儘管如此，我並不是一個真正的jQuery專業人士，所以可能並非如此。

來源

2012-01-16 01:03:19 Jeff

獲取（計算）具有動態寬度的多個元素的總寬度

回答

相關問題