Question

<p class="abc">Lorem ipsum</p>
<p class="xyz">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac lectus ac sapien cursus ullamcorper. Proin facilisis accumsan ante, at iaculis magna aliquam consectetur.</p>

<p class="abc">Lorem ipsum</p>
<p class="xyz">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac lectus ac sapien cursus ullamcorper. Proin facilisis accumsan ante, at iaculis magna aliquam consectetur.</p>

<p class="abc">Lorem ipsum</p>
<p class="xyz">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac lectus ac sapien cursus ullamcorper. Proin facilisis accumsan ante, at iaculis magna aliquam consectetur.</p>

Here, i have 2 sets of Classes assign to different paragraphs.

I have counted the number of paragraphs with class “xyz” that is 3.

How can I dynamically add different ids assigining different count number to each paragraphs with class “xyz”.

For example:

 <p class="xyz" id="p1"></p>
 <p class="xyz" id="p2"></p>
 <p class="xyz" id="p3"></p>

I have tried:

$js = jQuery.noConflict();
$js(document).ready(function(){ 
    var count = $js('.xyz').length;  //here count = 3
});

Answer 1

$js(document).ready(function(){        
    $js('.xyz').each(function(index)
    {
        $js(this).attr('id', 'p' + (index + 1))
    });
});

each function docs:

Description: Iterate over a jQuery object, executing a function for each matched element.