如何将文本节点中的每个字符包装在 <li> 中？答案

【问题标题】：How can I wrap each character from a text node in a <li>?如何将文本节点中的每个字符包装在 <li> 中？
【发布时间】：2013-09-02 10:50:06
【问题描述】：

我想将字符串值拆分为单个数字，并将 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>

【问题讨论】：

标签： javascript jquery split

【解决方案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

【讨论】：

感谢 Rituraj 的帮助，但为什么不使用 wrap()
您创建新的 html 并插入到容器中，因此对于此追加很好，您也可以在 jquery 中使用 html() 但通过之前的 html 删除，因此使用追加，您也可以使用 wrap 但我更喜欢追加你可以在这里看到包装api.jquery.com/wrap

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

不要用 html 内容包装，在 wrap() 中只允许使用 html 标记

这是你的答案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]);
})

【讨论】：