выделите каждое слово и добавьте класс jquery

Question

выделите каждое слово и добавьте класс jquery

0

<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, чтобы добавить span к каждому из них

  $(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> ", которые не нуждаются в получении диапазона. Пытаясь понять, как достичь первых трех слов и оставить остальных. Также слова динамичны, поэтому я не могу выбрать их по их значению.

Talha 24 фев. 2014, в 03:11

Источник

Теги:

jquery

3 ответа

3

Пытаться

$(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>'))
        }
    })
});

Демо: скрипка

Arun P Johny 24 фев. 2014, в 00:59

1

Вот обновленная функция и 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 слова и помещать на них тег, а остальные будут помещены как обычные слова.

Mark Dodds 24 фев. 2014, в 00:41

0

Проблема в том, что я не могу изменить HTML. Так что я не могу добавить #word_list
Talha 24 фев. 2014, в 02:48
0

Можно ли добавить это с помощью wrap () в первую очередь?
Talha 24 фев. 2014, в 02:52

Ещё вопросы

Проблема в том, что я не могу изменить HTML. Так что я не могу добавить #word_list
Можно ли добавить это с помощью wrap () в первую очередь?

Roko C. Buljan · Accepted Answer · 2014-02-23T23-28-00.000Z

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

Благодарю. Хотя я столкнулся с другой проблемой. Есть еще один div с тем же именем «icheckbox_line-blue», и теперь все слова из всех тех же именованных div-ов получают промежуток и собираются под каждым из этих div-ов.
@Talha снова отредактировал мой ответ