Question

我喜欢以下代码

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

类“数字”是位置绝对元素＆amp;它在一个页面中使用了不止一次。

班级“数字”内的内容将动态变化。所以我需要将子宽度应用于其父容器

我尝试了这段代码但没有工作。

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 span

的子项

$('.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

根据here，这对我有用。

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

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

3 个答案: