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

Posted 2023-05-09

【中文标题】在 Jquery 代码中，我想通过数组、.each、index、variable 为每个文本值分配许多不同的选择器

【英文标题】：In Jquery code, I want to assign many different selectors to each text value through arrays, .each, index, variable

【发布时间】：2020-08-19 13:12:07

【问题描述】：

我有功能代码：

  $(".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

但我仍然想要两个数组（不仅仅是一个数组）- 一个用于文本值，第二个用于类... 谁能帮忙？

【问题讨论】：

只需删除 each 并将索引放入 Pw 而不是 fn 应该这样做

【参考方案1】：

您可以只使用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>

【讨论】：

哇，实用！多么简单的代码！非常感谢尼克！

是的，我发现了一个与 id 类似的情况......如果我们用 id 替换类，那么我们有以下功能代码： var Pw = ["#A1","#A2","#A3 "]; var a = ["10", "20", "30"]; Pw.forEach((id, i) => $(id).text(a[i]));

@MarkSVK 不用担心 - 我很高兴能帮上忙。对 id 值的适应也很有效。

【参考方案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>