計算使用jQuery

在多於一個類別的子元素的總寬度我haviing下面的代碼計算使用jQuery

<span class="numbers"> 
    <a href="#">20</a>, <a href="#">50</a>, <a href="#">100</a> 
</span>

類「數字」是絕對位置元素&在頁面中使用其超過一次。

類「數字」內的內容將動態變化。所以我需要應用兒童的總寬度到其父容器

我試過這個代碼，但不工作。

var totalWidth = 0; 
$(".numbers").children('a').each(function() { 
     totalWidth = totalWidth + $(this).width(); 
     $('.numbers').each(function(){$(this).css("width", totalWidth);}); 
});

但是我只得到totalWidth值0。任何人都可以幫助請..........？

請參閱http://jsfiddle.net/contactsreejesh/xP3mn/6/

來源

2012-11-14 Sree

你確定你需要JavaScript嗎？製作a-tags塊並向左浮動，並且父容器應隨着內容更改而調整大小。 –

不，因爲我在頁面上多次使用「.numbers」。所以它的寬度應該是動態變化的。最重要的是它的位置：絕對元素。 – Sree

你的代碼實際上是爲我工作的 - 你可以設置一個小問題或將我們鏈接到一個實時頁面？ – Snuffleupagus

首先，您需要遍歷所有numbers元素。然後這個循環中，遍歷屬於每一個人numbers跨度孩子

$('.numbers').each(function() { 
    var totalWidth = 0; 
    /* "this" in this loop is the current numbers span*/ 
    var $self=$(this) 
    /* loop over all the children of this element*/ 
    $self.children('a').each(function() { 
     /* "this" in current loop is an A tag*/ 
     totalWidth += $(this).width();  
    }); 

    /* now set width*/ 
    $self.width(totalWidth) 

})

本聲明將影響到所有與整個頁面類的元素和他們都具有相同的寬度

$('.numbers').width(totalWidth);

來源

2012-11-14 22:13:17 charlietfl

非常感謝。你的代碼爲我完美工作。我只是玩過它而已。 http://jsfiddle.net/xP3mn/9/ – Sree

檢查這個小提琴http://jsfiddle.net/FGmYU/

的變化是這樣的：

totalWidth += $(this).width();

輸入顯示您所計算的寬度爲56

來源

2012-11-14 22:03:55

這不是問題。審查你的答案，以避免陷入低谷 –

似乎是我回答了這個問題。這是一個意外的提交，如果它仍然不正確，我很抱歉。 –

嗨，我已經安裝了jsFiddel請參閱。 http://jsfiddle.net/contactsreejesh/xP3mn/ – Sree

這對我的作品根據here。

var w = 0; 
$('.numbers').find('a').each(function(){ 
    w += $(this).width(); 
});

來源

2012-11-14 22:06:46 Snuffleupagus

計算使用jQuery

回答

相關問題