I have 10 <p> tags in my html with the class of .rule

I want to change the text of them individually without using separate id's such as #rule1, #rule2, #rule3:

$('#rule1').text('Rule 1')
$('#rule2').text('Rule 2')
$('#rule3').text('Rule 3')

I just want one class to be selected in JQuery but for it to edit the text of the other <p> tags with the same class.

How would I go about doing this?

I have 10 <p> tags in my html with the class of .rule

I want to change the text of them individually without using separate id's such as #rule1, #rule2, #rule3:

$('#rule1').text('Rule 1')
$('#rule2').text('Rule 2')
$('#rule3').text('Rule 3')

I just want one class to be selected in JQuery but for it to edit the text of the other <p> tags with the same class.

How would I go about doing this?

• javascript
• jquery
• html

• 1 So how will you reference the elements individually? by index? – epascarello Commented Mar 30, 2016 at 13:04
• What about myArray = $('rule'); ? With a loop on the array you can set a text for all elements. – BNilsou Commented Mar 30, 2016 at 13:05

8 Answers 8

Try this :-

$('p.rule').each(function( index ) {
  $(this).text("Rule" + (index + 1));
});

Fiddle

Docs

You can provide a function to the text() method which will act on each p tag individually, with no need to make another method call to each(). One of the parameters provided to the function is the index of the element in the matched set. Because of that, you can just return the index appended to a string, like this:

$('p').text(function(i) {
  return 'Rule ' + (i + 1);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

$('.foo').each(function( index ) {
    $(this).text("bar " + index);
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

You could use a loop to iterate over the DOM-Objects.

Have a look to this https://api.jquery./each/

This is safer than using the index of the each, since it takes the index relative to the siblings

$('p.rule').text(function() {
  return 'Rule ' + ($(this).index(".rule")+1);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="rule"></p>
<p class="notrule">Not a rule</p>
<p class="rule"></p>
<p class="rule"></p>
<p class="rule"></p>

Well if you want to have it hard coded than you can use .eq()

var rules = $(".rule");
rules.eq(0).text('Rule 1');
rules.eq(1).text('Rule 2');
rules.eq(2).text('Rule 3');

other option is to loop over the set with .each(function)

var rules = $(".rule");
rules.each( function (index) {
    $(this).text('Rule ' + index);
});

or loop over with .text(function) with a function

var rules = $(".rule");
rules.text( function (index) {
    return 'Rule ' + index;
});

Just loop through each p tag using below code. If you have clear idea that of how p tag should be manipulated then it is good else you need to use separate Id's or rely on the order in which your P tags appear.

$('p.rule').each(function( index ) {
    $(this).html("P with index" + (index) );// you can accordingly add html or any other jquery operation based on order/index of your p tag
});

Use this:

$('p').each(function( index ) {
    $(this).text('Rule ' + (index + 1));
});

You can use rowIndx.

var rowIndx = this.id.substring(this.id.length,this.id.length - 1 );

$("p.rule"+rowIndx).each(function(i){
  
  $(this).text("rule" + (i+1));
  
 });