Question

I’m haviing following code

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

class “numbers” is position absolute element & its using more than one time in a page.

Content inside class”numbers” will be dynamically changing. So I need to apply total width of children to its parent container

I tried this code but not working.

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

But I’m getting totalWidth value 0 only. Can any one help please……….?

Please see http://jsfiddle.net/contactsreejesh/xP3mn/6/

Answer 1

First you need to loop over all the numbers elements. Then within that loop, loop over the children that belong to each individual 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)

})

This statement will affect all the elements with the class in whole page and they would all have the same width

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