javascript - 通过 html.replace jquery 将文本包装在 <span> 元素中不起作用

Question

我正在将文本动态添加到 <p></p> 中基于数组值的元素。

//if there's more than one of the same value in an array 'scores'
if (scores.filter(item => item == scores_max).length > 1) {
  similar = [];
  document.getElementById('num_cond').textContent += ' So does';

  //then create an array 'similar' with those values

  for (var i = scores.length - 1; i > max_index; i--) {
    if (scores[i] == scores_max) {
      similar.push(premierleagueteams[i].name)
    }
  };

  //loop through values of that array and add them as text into the element

  for (var i = similar.length - 1; i >= 0; i--) {
    document.getElementById('num_cond').textContent += ' ' + similar[i];
  };

然后我想将这些值包装在 <span></span> 中元素所以我使用这个:

for (var i = similar.length - 1; i >= 0; i--) {

 $("#num_cond").html(function(i, html) {
    return html.replace(similar[i], '<span class="team-color">' + similar[i] + '</span>');
  });
};

但是它不起作用，文本添加得很好，但由于某种原因，这个最终循环没有将元素包装在跨度中。

编辑:我应该指定，但是当我输入最后一个“for”循环时:

for (var i = similar.length - 1; i >= 0; i--) {

 $("#num_cond").html(function(i, html) {
    return html.replace(similar[i], '<span class="team-color">' + similar[i] + '</span>');
  });
};

直接进入控制台，它工作正常，但由于某种原因，仅运行程序不会插入 span 元素。

运行程序的HTML:

<p id="num_cond">Everton meets 5 of your conditions. So does Leicester City.</p>

在控制台中输入 for 循环后的 HTML:

<p id="num_cond">Everton meets 5 of your conditions. So does <span class="team-color">Leicester City</span>.</p>

Answer 1

您可以使用 wrap 而不是使用替换。至:

Wrap an HTML structure around each element in the set of matched elements.

我已经制作了一个关于如何使用它的示例，您可以根据您的代码调整它(因为我不知道您的 HTML 是如何构造的)

 $("#num_cond").wrap('<span class="team-color"></span>' );

.team-color {
  background-color: red;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="num_cond">text</p>

更新(以满足OP要求)

好的，所以 .html() 返回您使用 jquery 选择的元素内的 html 内容。因此，当您修改该函数时，您只是修改了 .html() 方法返回的内容。不是您选择的元素内的内容。

话虽这么说，要修改使用 jquery 选择的元素内部的内容，您需要将所需的内容放在 .html 括号内，例如 $('# divId').html("div 内的新内容")

.html() documentation

所以我做了一个示例，说明您需要在 for 中放置什么内容，以便它修改 html 内容。请注意，$& 放置匹配的子字符串(在本例中为类似[i])。

.replace() documentation

var similar = ['Leicester City'];

for (var i = 0; i < similar.length; i++) {
  $("#num_cond").html($("#num_cond").html().replace(similar[i], '<span class="team-color"> $& </span>'));
}

.team-color {
  background-color: aqua;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="num_cond">Everton meets 5 of your conditions. So does Leicester City.</p>