How to insert countup number into two specific HTML classes

Question

Im iterating through .each class="q-submit" and doing a simple countup++. The result from each countup is written into: class="number"

<div class="section">
    <div class="q-submit">
        <div class="number"></div>
    </div>
</div>
<div class="section">
    <div class="q-result">
        <div class="number"></div>
    </div>
</div>
<div class="section">
    <div class="q-submit">
        <div class="number"></div>
    </div>
</div>
<div class="section">
    <div class="q-result">
        <div class="number"></div>
    </div>
</div>

Jquery:

submitContainer.each(function(){
    currentCount++;

    $(this).text(currentCount)
});

My issue: How do I also insert the countup number into the class="q-result" number class?

Fiddle: http://jsfiddle.net/xLeh8y9u/

The above should then output:

q-submit - 1

q-result - 1

---

q-submit - 2

q-result - 2

Answer 1

Try this :

var submitContainer = $('.q-submit');
var currentCount = 0;

submitContainer.each(function(){
    currentCount++;   
     $(this).find('.number').text(currentCount).end().closest('.section').next().find('.number').text(currentCount);
});

DEMO

Answer 2

For each class, for each member of that class, output its position in the collection + 1:

$.each(['.q-submit', '.q-result'], function(_, cl) {
  $(cl).each(function(idx) {
    $(this).text(idx+1);
  });
});

Fiddle

Answer 3

See comments inline in the code:

var counter = {
    'q-submit': 0, // Initialize the counter to zero
    'q-result': 0
}; // Counter for both the classes

var className = ''; // For getting classname of the current element in loop


// Iterate over .section
$('.section').each(function () {
    className = $(this).children('div').attr('class');
    // Get the class name of the direct child of current .section

    counter[className] += 1;
    // Increment the counter of the current class by one

    $(this).find('.number').text(className + ' => ' + counter[$(this).children('div').attr('class')]);
    // Add text of class and counter in the .number inside current .section
});

Demo: http://jsfiddle.net/tusharj/xLeh8y9u/5/

Answer 4

You could loop through your elements, get the first one and set the value here is a fiddle to show it in use

var submitContainer = $('.q-submit');
var currentCount = 0;

submitContainer.each(function(){
    currentCount++;
    setCurrentCount();
    $(this).text(currentCount);
});

function setCurrentCount(){
    $(".q-result .number").each(function(result){
        if($(this).text()===""){            
            $(this).text(currentCount);
            return false;
        }        
    });
}