Question

<div class="icheckbox_line-blue checked" type="checkbox">
<div class="icheck_line-icon"></div>
Word  5   Word   Word
<ins class="iCheck-helper"></ins>
</div>

我想在这里的前三个单词中添加一个类。我在这里也把“5”算作一个词。我使用以下js为每一个添加跨度

  $(function() {
    var all_words=$(".icheckbox_line-blue").text().split(' ');
    $(".icheckbox_line-blue").html("");
    $.each(all_words, function(i,val){
    $('<span/>').text(val +" ").appendTo(".icheckbox_line-blue");
    });
    });

但结果是创造了一堆跨度，其中一些围绕着这个词，其中一些是空的。如你所见，div中还有其他元素，如“<div class="icheck_line-icon"></div>”，不需要获得跨度。试图找出如何达到前三个单词并留下其余部分。这些词也是动态的，所以我不能用它们的价值来选择它们。

Answer 1

尝试

$(function () {
    $(".icheckbox_line-blue").contents().each(function () {
        if (this.nodeType == 3 && $.trim(this.nodeValue)) {
            $(this).replaceWith(this.nodeValue.replace(/([^\s]+)/g, '<span class="myclass">$1</span>'))
        }
    })
});

演示：Fiddle

Answer 2

<强> jsBin demo

$(function() {

  $('.icheckbox_line-blue').each(function(){ // EACH!!!

    var parts = $.trim( $(this).text() ).split(/\s+/g);
    var newHTML = "";
    $.each(parts, function(i,val){
       newHTML += "<span>"+ val +"</span>";
    });

    $(this).html(newHTML); // Append only once (10x faster)

  });

});

确保$.trim()您的内容并在全局范围内按/\s+/g一个或多个空格分开。
另请注意您使用$('<span/>', {text: val+' '})

的方式

Answer 3

这是更新的功能和html代码。我已将这些单词放入自己的div中，以便可以轻松访问和分割。

HTML

<div class="icheckbox_line-blue checked" type="checkbox">
<div class="icheck_line-icon"></div>
<div id="word_list">Word 5 Word Word</div>
<ins class="iCheck-helper"></ins>
</div>

JS

$(function() {
var all_words = $("#word_list").text().split(' ');
$(".icheckbox_line-blue").html("");
for (var x = 0; x < all_words.length; x++) {
    if (x < 3) {
        $('<span/>').text(all_words[x] + " ").appendTo(".icheckbox_line-blue");
    }

    else {
        $(".icheckbox_line-blue").append(all_words[x] + " ")
    }
}
});

这也只会选择前3个单词并在其上加上标签，其余的将作为普通单词输入。

选择每个单词并添加一个类jquery

3 个答案: