在Jquery代码中，我想通过数组、.each、索引、变量为每个文本值分配许多不同的选择器。

Question

我有功能代码。

  $(".A1").text("10");  
  $(".A2").text("20");  
  $(".A3").text("30");

但在我的功能网站里有很多类，比如说，我的功能网站里有很多类

$(".A80").text("800");

我想通过两个带变量的数组来简化这些代码，其中一个数组是类...第二个数组由文本值组成...。，现在我有了非功能代码。

var Pw = [".A1",".A2",".A3"];  
var index, len;  
var a = ["10", "20", "30"];  
for (index = 0, len = a.length; index < len; ++index) {             
    $.each(Pw, function(fn){   
        $(Pw[fn]).text(a[index]);  
    });  
}

在这段代码中，只有一个值

("30")

被分配到所有三个班级

".A1",".A2",".A3",

我想分配

10 to A1      
20 to A2      
30 to A3

但我还是希望有两个数组（不是只有一个数组）--一个是文本值，第二个是类......。 谁能帮帮我？

Answer 1

你可以直接使用".A80".text("800"); ... Array.forEach 遍历 Pw 数组，将选择器描述的元素设置为对应的文本值，从 a:

var Pw = [".A1",".A2",".A3"];  
var a = ["10", "20", "30"];

Pw.forEach((c, i) => $(c).text(a[i]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1"></div>
<div class="A2"></div>
<div class="A3"></div>

Answer 2

将选择器保持为一个字符串，包含所有相关目标。与选择器相比，使用数组是有限的。如果你在jQuery对象中迭代(例如......)，使用增量给每个对象分配一个数字。$(selector))使用增量来给每个对象分配一个数字。

这里有一个jQuery插件，是可以重复使用的。以下是签名（如何使用的例子）。

$(selector).serialText(increment, startIncrement = 1);

适用于OP提供的情况。

$('[class^="A"]').serialText(10)

// selector: $(Any element that has a [class that starts with: ^="A"])
// .serialText(..., ...)
// increment: 10
// incrementStart: if not included then the default is used: 1

作为一个jQuery插件，你可以将其他方法链到它上面。

$('[class^="A"]').serialText(10).css('color', 'red');

另外，不是想冒犯你，但这么多的类似乎过于不必要。你可以用相同的类来达到你的目的。

---

演示

$.fn.serialText = function(number, start = 1) {
  $(this).each(function(i) {
    let pattern = (i + start) * number;
    $(this).text(pattern);
  });
  return this;
}

$('[class^="A"]').serialText(10).css('color', 'red');

<section class='A1'></section>
<section class='A2'></section>
<section class='A3'></section>
<section class='A4'></section>
<section class='A5'></section>
<section class='A6'></section>
<section class='A7'></section>
<section class='A8'></section>
<section class='A9'></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>