JQuery同一类的不同内容

JQuery different content for the same class

本文关键字：一类 JQuery      更新时间：2023-09-26

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

我想单独更改它们的文本，而不使用单独的id，如#rule1、#rule2、#rule3:

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

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

我该怎么做？

试试这个：-

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

Fiddle

单据

您可以为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>

$('.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对象。

看看这个https://api.jquery.com/each/

这比使用每个的索引更安全，因为它采用相对于兄弟的索引

$('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>

如果你想对它进行硬编码，那么你可以使用.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;
});

只需使用以下代码循环遍历每个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
});

使用此：

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

您可以使用rowIndx。

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

相关文章：