jquery-ui - 使用jquery计算多个类中子元素的总宽度

Question

我有以下代码

 <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/

Answer 1

首先，您需要遍历所有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); 

Answer 2

检查这个小提琴http://jsfiddle.net/FGmYU/

变化是这样的：

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

输入显示计算出的宽度为 56。

Answer 3

根据这里，这对我有用。

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