Question

我花了两天时间，所以如果有一个简单的答案，我会感到沮丧。我试图在div中的每个字母周围放置一个span标记，同时保留其余标记。

<div id="div">
    <p>
      Of course some of the <strong>text is in other tags</strong> and <strong>some 
      is  in <em>nested tags</em>, etc.</strong>
    </p>
</div>

我非常接近，但总有一些事情让我兴奋不已。

Answer 1

我明白了！这可能不是最佳解决方案，但它有效！另请注意，由于额外的标签，空格可能会搞砸。这也包装了标签，但也很容易解决。

function wrap(target) {
    var newtarget = $("<div></div>");
    nodes = target.contents().clone(); // the clone is critical!
    nodes.each(function() {
        if (this.nodeType == 3) { // text
            var newhtml = "";
            var text = this.wholeText; // maybe "textContent" is better?
            for (var i=0; i < text.length; i++) {
                if (text[i] == ' ') newhtml += " ";
                else newhtml += "<span>" + text[i] + "</span>";
            }
            newtarget.append($(newhtml));
        }
        else { // recursion FTW!
            $(this).html(wrap($(this)));
            newtarget.append($(this));
        }
    });
    return newtarget.html();
}

用法：

$("#div").html(wrap($("#div")));

Answer 2

function init(target) {
var newtarget = $('<div></div>'); 
nodes = target.contents().clone(); // the clone is critical! 
nodes.each(function(i,v) { 
    if (v.nodeType == 3) { // text
        if($.trim($(this).text()).length>0){
            var letters=$(this).text().split('');
            for (var j = 0; j < letters.length; j++) {
                newtarget.append('<span class="letter">'+letters[j]+'</span>')
            }
        }
    } 
    else { // recursion FTW! 
        newtarget.append($(this)); 
        $(this).html(init($(this))); 
    } 
});
return newtarget.html(); 
}

这很有效。然而，即（无论如何）7，剥离所有空间。另外，我应该在函数末尾从dom中删除newtarget吗？克隆人怎么样？应该删除吗？

Answer 3

您可能想看一下我的插件TextGrad，它允许使用jQuery对象中添加的“spanize”方法完成此操作。

http://github.com/subtenante/TextGrad

修改：

我忘了（！）我在那里有一个演示：

http://www.si-les-idees-suffisaient.net/jquery/textgrad.html

使用jQuery：如何将每个字母包装在标签中？

3 个答案: