javascript - 将拆分字符串的子字符串包装在元素中

Question

我如何使用 javascript/jquery 来选择所有$('td.created')并拆分 html <br>，然后将每个部分包装在 span 标签中（这样我就可以向 span:first 添加一个类以对其进行样式设置）。

返回的字符串的格式$('td.created').html()类似于

posted by User123 <br> Posted on 1/2/12 at 4:15PM

Answer 1

可能的通用解决方案（不仅适用于 2 行）：

$("td.created").each(function() {
    var text = this.innerHTML.split("<br>");
    for (var i = 0; i < text.length; i++) {
        var span = $("<span />").html(text[i]);
        if (i == 0) span.addClass("first");
        span.appendTo("#element");
    }
});​

演示：http: //jsfiddle.net/7xQAL/

Answer 2

$('td.created').each(function(i, html) {
    var newHtml = $(this).contents(),
        spans = [];
    newHtml.each(function() {
        var html = (this.nodeName.toLowerCase() == 'br') ? '<br>' : '<span>' + this.textContent + '</span>';
        spans.push(html);
    });
    $(this).html(spans.join(''));
});

演示（使用 DIV 容器） http://jsfiddle.net/PVLek/