Игнорировать элементы массива только для пробелов - PullRequest
1 голос
/ 11 апреля 2020

У меня есть много строк, разделенных запятыми, каждая из которых состоит из списка тегов, и я хочу стилизовать каждый тег внутри блока ( см. Здесь ).

Я преобразовал каждую строку, разделенную запятыми ("p"), в массив, затем обернул <span> теги вокруг каждого значения в массиве, так что я мог оформить его с помощью CSS, который отлично работал.

Но строки пробелов также оборачиваются в теги span, которые я не хочу, я хочу игнорировать их (или скрывать).

Как мне игнорировать те вхождения "p", которые содержат только пробел? Ответы здесь и здесь , но у меня не сработали.

HTML:

<p>Skill 1, Skill 2, Skill 3</p>
<p>Skill 1</p>
<p> </p>

Javascript:

  $("p").each(function() {
    var words = $(this).text().split(", ");
    var total = words.length;
    $(this).empty();
    for (index = 0; index < total; index++) {
      $(this).append($("<span class = 'tag' > ").text(words[index]));
    }
  })

CSS:

.tag {
  background-color: lightgray;
  padding: 3px;
  margin: 3px;
  border-radius: 3px;
}

JS Скрипка

Ответы [ 3 ]

0 голосов
/ 11 апреля 2020

Вы должны применять свою функцию только к соответствующим элементам. В следующем примере я использовал это условие:

$(this).text().trim().length > 0

$("p")
  .each(function() {
    const text = $(this).text().trim();
    // This condition will make sure that "empty" p elements won't be affected
    if (text.length > 0) {
      var words = $(this).text().split(", ");
      var total = words.length;
      $(this).empty();
      for (index = 0; index < total; index++) {
        $(this).append($("<span class = 'tag' > ").text(words[index]));
      }
    }
  })
.tag {
  background-color: lightgray;
  padding: 3px;
  margin: 3px;
  border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Skill 1, Skill 2, Skill 3 </p>
<p>Skill 1</p>
<p> </p>
0 голосов
/ 11 апреля 2020
function convertToTags(s) {

  $("p").each(function() {
    var text = $(this).text();
    if(!text.replace(/ /g, '')){
        $(this).remove();
        return;
    }
    var words = text.split(", ");
    var total = words.length;
    $(this).empty();
    for (index = 0; index < total; index++) {
      $(this).append($("<span class = 'tag' > ").text(words[index]));
    }
  })


}

Волхвы c лежат в первых двух утверждениях в функции .each. Перед выполнением разбиения мы проверим, есть ли в этом параграфе что-то еще, кроме пробелов.

Если нет, удалите этот абзац и начните следующую итерацию.

0 голосов
/ 11 апреля 2020

Просто проверьте, правдив ли обрезанный текст первым. Также убедитесь, что не для неявного создания глобальных переменных, всегда объявляйте переменные с const (или let или var) перед их использованием, в противном случае ошибки будут выдаваться в строгом режиме:

if (words[index].trim()) {
  $(this).append($("<span class = 'tag' > ").text(words[index]));
}

// Converts comma separated string into tags 
function convertToTags(s) {

  $(s).each(function() {
    var words = $(this).text().split(", ");
    var total = words.length;
    $(this).empty();
    for (let index = 0; index < total; index++) {
      if (words[index].trim()) {
        $(this).append($("<span class = 'tag' > ").text(words[index]));
      }
    }
  })


}


// Calls the function on document ready
$(document).ready(function() {
  convertToTags("p");
});
.tag {
  background-color: lightgray;
  padding: 3px;
  margin: 3px;
  border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This, is, a, test</p>
<p>This</p>
<p> </p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...