如何将数组元素依次赋值到多个<p>标签？当前仅最后一个生效

你的代码核心问题是给所有包含items-carting的

标签设置了同一个id xyz——DOM中id必须唯一，当用$("#xyz")选择元素时只会选中第一个匹配项，循环里每次修改它的文本，最终就只剩下最后一次赋值的内容。

修正后的代码 #

直接保留选中的jQuery元素集合，遍历每个元素时完成文本替换，无需多余的数组中转：

var userInput = "items-carting";
var all_script = "This is the value : ";
// 选中所有包含指定文本的p元素，不统一设置id
var $targetPs = $("p:contains(" + userInput + ")");

// 遍历每个目标p元素，逐个修改文本
$targetPs.each(function() {
  var originalText = $(this).text();
  var indexEqu = originalText.indexOf("=");
  // 提取nums属性的取值
  var slicedVal = originalText.slice(indexEqu + 2, indexEqu + 22);
  // 拼接新文本并赋值
  var newText = all_script + slicedVal + " to be saved";
  $(this).text(newText);
});

完整HTML代码 #

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>[items-carting nums="hbn7wxjxjodpxi2nlmml"]</p>
<p>[items-carting nums="nlmmljodhbni27wxjxpx"]</p>
<p>[items-carting nums="bni27wxjnlmmljodhxpx"]</p>
<p>product design</p>
<p>vmware</p>
<script>
var userInput = "items-carting";
var all_script = "This is the value : ";
var $targetPs = $("p:contains(" + userInput + ")");

$targetPs.each(function() {
  var originalText = $(this).text();
  var indexEqu = originalText.indexOf("=");
  var slicedVal = originalText.slice(indexEqu + 2, indexEqu + 22);
  var newText = all_script + slicedVal + " to be saved";
  $(this).text(newText);
});
</script>
</body>
</html>

运行后输出 #

This is the value : hbn7wxjxjodpxi2nlmml to be saved

This is the value : nlmmljodhbni27wxjxpx to be saved

This is the value : bni27wxjnlmmljodhxpx to be saved

product design

vmware

内容的提问来源于stack exchange，提问作者Mayuresh Deshmukh