Question

我想替换包含字符链且具有相同链的h1元素的内容，但每个字符都应包裹在一个跨度中。

这对我来说似乎很容易，但是我可能低估了它。

这是我尝试过的（仅出于调试目的而使用CSS）：

var titleLen = $("#title").length - 1;
for (i=0; i<titleLen; i++) {
	letter = $("#title").charAt(i);
	$("#title").append("<span>" + letter + "</span>");
};

h1 span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
Hello World !
</h1>

它不起作用，但是我找不到问题。有帮助吗？

Answer 1

当前代码无法正常工作的部分原因是，您正在DOM元素上调用length和charAt而不是其内容，但是即使更正了，在迭代的每个步骤中修改div的内容，因此第二个charAt会达到您刚刚插入的跨度的一部分，而不是原始字符串的第二个字符。（编辑：我只是意识到这种描述是不正确的；您会在原始文本之后加上跨距包装的副本，因为您会添加而不是替换。）

以下是您可以使用原始算法的几种不同方式：

// keep a copy of the original string and work from that:
var title = $("#title").html();
$('#title').html('');
for (i = 0; i < title.length; i++) {
  letter = title.charAt(i);
  $("#title").append("<span>" + letter + "</span>");
};


// Alternatively, build a string and dump it into the DOM all at once:
/*
let output = '';
for (i = 0; i < $('#title').html().length; i++) {
  letter = $('#title').html().charAt(i);
  output +="<span>" + letter + "</span>";
};
$('#title').html(output);
*/

h1 span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
  Hello World !
</h1>

或更简单的方法是将字符串分割成每个字符的数组，然后使用'join'来包含span标签：

$('#title').html(
  '<span>' + 
  $('#title').html().split('').join('</span><span>') +
  '</span>'
)

h1 span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
Hello World !
</h1>

用包含每个字符的范围替换字符串

1 个答案: