Question

我的html中有10个<p>个标签，其类别为.rule

我想单独更改它们的文字，而不使用#rule1，#rule2，#rule3等单独的ID：

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

我只想在JQuery中选择一个类，但是要编辑具有相同类的其他<p>标记的文本。

我将如何做到这一点？

Answer 1

试试这个： -

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

Fiddle

Docs

Answer 2

您可以为text()方法提供一个函数，该函数将单独作用于每个p标记，而无需对each()进行其他方法调用。提供给函数的参数之一是匹配集中元素的索引。因此，您只需返回附加到字符串的索引，如下所示：

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

<script src="https://ajax.googleapis.com/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>

Answer 3

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

<script src="https://ajax.googleapis.com/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>

您可以使用循环迭代DOM-Objects。

查看此https://api.jquery.com/each/

Answer 4

这比使用每个索引更安全，因为它取得了相对于兄弟姐妹的索引

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

<script src="https://ajax.googleapis.com/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>

Answer 5

好吧，如果你想要硬编码，你可以使用.eq()

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

其他选项是使用.each(function)

循环设置

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

或使用函数

循环.text(function)

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

Answer 6

使用下面的代码循环遍历每个p标记。如果您清楚地了解应如何操作p标签，那么您还需要使用单独的ID或依赖于P标签出现的顺序。

$('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
});

Answer 7

使用此：

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

Answer 8

您可以使用rowIndx。

var rowIndx = this.id.substring(this.id.length,this.id.length - 1 );

$("p.rule"+rowIndx).each(function(i){
  
  $(this).text("rule" + (i+1));
  
 });

JQuery针对同一个类的不同内容

8 个答案: