Question

I’m building a function based on Twitter Bootstrap’s responsive grid. It uses .row-fluid as a container and spans as nodes that fit inside the rows. Each row can have a maximum of 12 ‘spans’ in it.

I want my function to find any element with class .row-fluid, find its child nodes, take the class name, remove “span” from it (leaving only a number) and add those numbers together. If the result is bigger than 12, I’d like it to shrink the biggest number down until the number DOES equal 12.

Sounds complicated, hopefully I’m not TOO far off. Here’s where I’m at so far:

$('.row-fluid').each(function() {
    var spanned = $(this).children('div[class*=span]').each(function() {
        var total = 0, nums = $(this).attr('class').match(/\d+/);
        nums.each(function() {
            total += this;
        }
        console.log(total);
    }
    );
    console.log("break");
}
);

At present this is logging the WHOLE element rather than just the numbers so I’m at a bit of a loss as to where I’ve gone wrong/what to do from here. Any advice?

EDIT: The structure is similar to this:

<div class="row-fluid">
  <div class="span5">

  </div>
  <div class="span4">


  </div>
  <div class="span2">

  </div> //Function should check if the 3 above spans <= 12
  <div class="row-fluid">
      <div class="span8"> //Function should see this and...
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div> //...this and see that they DON'T equal 12, then subtract 2 from the bigger span so that they DO equal 12
    </div>
  </div>
</div>

Answer 1

I’ll take a wild guess, this is what you’re trying to do :

$('.row-fluid').each(function(i,ele) {
    var total = 0;
    $(ele).children().each(function(i2, spans) {
        if (spans.className.indexOf('span') != -1) {
             total += parseInt(spans.className.replace(/[A-Za-z$-]/g, ""),10);
        }
    });
});