JQuery different content for the same class

Question

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?

Answer 1

Try this :-

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

Fiddle

Docs