如何从一个文本节点中包装每个字符 ?

Question

我想在一个数字中分割一个字符串值，并在wrap()中分割<li></li>。我正在努力实现这一目标，但未能做到以下是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(e) {
    var str = $('#number').html();
    var spl = str.split('');
    var len = spl.length;
    var i = 0;
    setInterval(function() {

      if (i <= len) {
        $('#number').wrap('<li>' + spl[0] + '</li>')

      }
      i++;

    }, 200)
  })
</script>

<div id="number">123456 as</div>

Answer 1

<script>
$(document).ready(function(e) {
    var str = $('#number').html();
    var spl = str.split('');
    var len = spl.length;
    var i = 0;
    setInterval(function(){

        if(i <= len )
        {
            $('#number').append('<li>'+spl[i]+'</li>')

            }
        i++;

        },200)
})
</script>

参考append

Answer 2

这里spl[0]这总是选择数组的第一个索引（拆分）...使用spl[i]

试试这个

 var str = $('#number').html();
 var spl = str.split('');
 var len = spl.length;
 var i = 0;

 setInterval(function () {

 if (i < len) {
     if (spl[i] != " ") { //checking for the space here
         $('#number').append('<li>' + spl[i] + '</li>')
                   //-^^^^^^----------^^^^^^-----here
     }
 }
 i++;

 }, 200)

fiddle here

Answer 3

如果你试图将每个字符从文本移动到<li>，那么这里是一个替代解决方案，将文本节点拆分并包装它们：

//- Get a reference to the raw text node
var txt = $('#number').contents()[0];

setTimeout(function repeat(){
    if (txt.nodeValue.length) {
        //- Split the text node after the first character
        txt = txt.splitText(1);

        //- txt is now the latter text node, so wrap the former with a <li>
        $(txt.previousSibling).wrap('<li>');

        //- Rinse and repeat
        setTimeout(repeat, 200)
    }
},200);

http://jsfiddle.net/9wRbe/

此外，我将你的setInterval替换为setTimeout，因为你的计时器将无限期地运行，而当序列完成时这会停止。

这是一个向后分裂的乐趣：

var txt = $('#number').contents()[0];

setTimeout(function (){
    if (txt.nodeValue.length) {
        $(txt.splitText(txt.nodeValue.length - 1)).wrap('<li>');

        setTimeout(arguments.callee, 200)
    }
},200);

http://jsfiddle.net/9wRbe/1/

也可以看看：

• https://developer.mozilla.org/en-US/docs/Web/API/Text.splitText

Answer 4

试试这个：

var str = $('#number').html();
    var spl = str.split('');
    var len = spl.length;
    var i = 0;
    setInterval(function(){

        if(i <= len )
        {
            if(spl[i] !== undefined && spl[i] !== " "){
                $('#number').wrap('<li>'+spl[i]+'</li>')
            }
        }
        i++;
    },200);

在这里工作小提琴：http://jsfiddle.net/n5Brh/1/

Answer 5

不要用html内容包装只允许在wrap（）中使用html标签

这是你的ans jsfiddle

$(document).ready(function(e) {
    var str = $('#number').html();
    var spl = str.split(' ');
    var len = spl.length;
    var i = 0;


        if(i <= len )
        {
            $('#number').wrap('<li id="dd"> </li>')

            }
        i++;

       $('#number').text(spl[0]);
})