如何包裝文本節點中的每個字符 <li> ？

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>

參考附錄

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)

在這里擺弄

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