如何从一个文本节点中包装每个字符?
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)
另一答案
如果你试图将每个字符从文本移动到<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);
此外,我将你的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);
也可以看看:
另一答案
试试这个:
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]);
})
以上是关于如何从一个文本节点中包装每个字符?的主要内容,如果未能解决你的问题,请参考以下文章