javascript - 如何仅搜索 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”类别，它也会显示“政治”，因为它在这个词中 - 但这不是我想要的：D）。但我希望它只在“categoryname”类中查找 span 标签。

标签： javascriptjqueryhtmlcssjquery-selectors

Answer 1

您的代码有几个问题：

• 遇到此类问题时，您应该学习如何调试，例如使用console.log，以确保您的选择得到您想要的（删除评论以查看它们的实际效果）
• 你filter无缘无故地在这里使用。Filter 返回一个数组，该数组根据参数函数是否返回trueor来过滤您的基本数组false。使用 jQueryeach或纯 JSmap
• 您可以使用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>