Как искать только определенный тег span в списке HTML, а не все элементы списка?(JQuery)

Question

У меня проблема с фильтром моей категории. Я создал выпадающий список с различными категориями и обычным списком с информацией, такой как заголовок и категория. Если пользователь выбирает опцию в примере «IT», он показывает все элементы списка со словом «IT». Теперь проблема в том, что он фильтрует все слова с «IT», но я хочу искать только по тегу «categoryname».

Вот мой код:

$(document).ready(function() {
  $(".categoryselection").on("change", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li.list-choose span.kategorie, #myList li.list-choose").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      $("span.categoryname").css({
        display: 'block',
        color: '#e60'
      })
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="categoryselection">
  <option selected="selected" disabled="disabled">Category</option>
  <option value="All categorys">All categorys</option>
  <option value="Economy">Economy</option>
  <option value="Politics">Politics</option>
  <option value="IT">IT</option>
</select>

<ul id="myList">
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 1: test</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 2</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Politics<span style="display: none">All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 3</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: IT</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">No category<span style="display: none">All categorys</span></span>
    </div>
  </li>
</ul>

Вы можете видеть, что он также ищет имя элементов списка (если вы выбираете категорию "IT", он также отображает "политику", потому что IT находится внутри этого слова - но это не то, что я хочу: D). Но я хочу, чтобы он только искал тег span в классе "categoryname".

Answer 1

Было несколько проблем с вашим кодом:

• Когда вы столкнетесь с такой проблемой, вы должны научиться отлаживать, например, с помощью console.log, чтобы убедиться, что ваш выбор получил то, что вы хотите (удалите комментарии, чтобы увидеть их в действии)
• Вы использовали filter здесь без причины. Фильтр возвращает массив, который фильтрует ваш базовый массив в зависимости от того, возвращает ли функция аргумента true или false. Используйте скорее jQuery each или простой JS map
• Вы можете использовать find для выбора элементов внутри вашего первого выбора
• вы получаете несколько тегов категорий в строке, если вы хотите изолировать их, вы должны использовать разделитель (я выбрал «|»). Затем вы можете использовать split для преобразования строки в массив и indexOf для проверки соответствия:

Удачи!

$(document).ready(function() {
  $(".categoryselection").on("change", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li.list-choose span.kategorie, #myList li.list-choose").each(function() {
      //console.log($(this)); //will show the current element
      //console.log($(this).text()); //will show the current element's text
      $(this).toggle($(this).find(".categoryname").text().toLowerCase().split("|").indexOf(value) > -1);
      $("span.categoryname").css({
        display: 'block',
        color: '#e60'
      })
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="categoryselection">
  <option selected="selected" disabled="disabled">Category</option>
  <option value="All categorys">All categorys</option>
  <option value="Economy">Economy</option>
  <option value="Politics">Politics</option>
  <option value="IT">IT</option>
</select>

<ul id="myList">
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 1: test</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">|All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 2</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Politics<span style="display: none">|All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 3</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">|All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: IT</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">No category<span style="display: none">|All categorys</span></span>
    </div>
  </li>
</ul>

Answer 2

В вашем случае вы используете indexOf, чтобы найти первое вхождение, а не точное совпадение.

Как показано на в этом посте , вы должны использовать строгое сравнение.

В вашем скрипте заменить:

 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

на

if (value === $(this).toggle($(this).text().toLowerCase())