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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从一个文本节点中包装每个字符?相关的知识,希望对你有一定的参考价值。

我想在一个数字中分割一个字符串值,并在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>
答案
<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

另一答案

这里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

另一答案

如果你试图将每个字符从文本移动到<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/

也可以看看:

另一答案

试试这个:

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/

另一答案

不要用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]);
})

以上是关于如何从一个文本节点中包装每个字符?的主要内容,如果未能解决你的问题,请参考以下文章

如何在窗口结束前包装文本5个字符?

如何从包装的文本单元格中提取特定的文本行?

我应该如何使用 Outlook 发送代码片段?

机器学习—朴素贝叶斯

xQuery,如何从带有孩子的节点获取文本?

如何使用jQuery在元素的内部文本的最后一个单词周围包裹一个范围?