選擇每個單詞並添加一個類jquery

<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來跨度添加到他們選擇每個單詞並添加一個類jquery

$(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>」，它不需要跨度。試圖想象我們如何達到前三個字，然後離開。此外，這些詞是動態的，所以我不能通過它們的值來選擇它們。

來源

2014-02-24 Talha

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+' '})

來源

2014-02-24 02:23:34

謝謝。雖然我遇到了另一個問題。還有另一個div名稱爲「icheckbox_line-blue」，現在所有相同命名div的所有單詞都會得到一個span，並在每個div下收集。 – Talha

@Talha再次編輯我的答案 –

謝謝，這工作得很好！ – Talha

嘗試

$(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

來源

2014-02-24 02:25:10

這裏是一個更新的功能和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>

$(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個字，把一個標籤上他們，其餘的將被放於正常的話。

來源

2014-02-24 02:25:43

問題是我無法修改html。所以我無法添加#word_list – Talha

有沒有添加使用wrap（）第一？ – Talha

選擇每個單詞並添加一個類jquery

回答

相關問題