将字符串替换为包含每个字符的跨度

Question

我希望用相同的链替换包含字符链的h1元素的content，但是每个字符都应该包装在span中。

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

下面是我尝试过的内容(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>

​