Question

I’m new to programming so not sure if this could be done in jQuery.

I need to select a group of paragraphs with the same class, and then assign them a value from an array (replacing their content or appending it to the paragraph) so for the first item the index 0 from the array for second paragraph index 1 of the array and so on.

I’m guessing i’ll have to do a loop an each() kind of function so this is what I came up with

$(document).ready(function(e) {
    writeValues('values','.mainPageMeters');
});

function writeValues ( a , b ) {
    var mCount = 0;
    var mValues = $('<p>');

    $("p.mainPageMeters" + a).each(function() {
        $(this).html('<p>' + mCount + '</p>' +    $(this).html());
        mValues.append($('<p>' + mCount++ + $(this).text() + '</p>')); 
    });

    $("" + b).append(mValues);
}



<p class="mainPageMeters">Loren Ipsum bla bla bla </p>
<p class="mainPageMeters">Loren Ipsum bla bla bla </p>
<p>Loren Ipsum bla bla bla </p>
<p class="mainPageMeters">Loren Ipsum bla bla bla </p>

Answer 1

You’re on the right track, it looks like you just need a bit more practice with JS. Here’s a quick example I whipped up, I think this is what you’re trying to do.

​var arr, numOfWords, paragraphs;

​arr = ["newFoo", "newBar"]​​​;
paragraphs = $(".myClass")

    // here I'm using jQuery to loop over each paragraph
    paragraphs.each(function (i, elem) {
       // here I assign the paragraphs text to the array's current index
       $(elem).text( arr[i] );    
    });

http://jsfiddle.net/n3GKf/