Question

我想在li元素中搜索指定的字符串，并且只有在li元素不包含该字符串时才删除该类。

<input type="text" name="search"/>
<div class="myClass">
  <ul>
    <li>computer</li>
    <li>mobile</li>
  </ul>
</div>

<div class="myClass">
  <ul>
    <li>car</li>
    <li>jeep</li>
  </ul>
</div>

当我输入＆＃39; car＆＃39;在搜索字段中，我想隐藏/删除除包含搜索字符串的那些类之外的所有类。

Answer 1

如果我理解正确，您希望隐藏任何不包含搜索词的li元素。

您可以在indexOf()事件上使用input方法，如下所示：

$(document).on('input', '#searchInp', function() {

  var li = $('.myClass').find('ul > li');
  var val = $(this).val();

  //Remove all .hidden classes
  li.removeClass('hidden')

  if (val && val.length > 0) {

    li.each(function() {
      var that = $(this);
      var txt = that.text();

      //If searched term is not found into li's text
      if (txt.indexOf(val) == -1) {
        //Add .hidden class to the specific element
        that.addClass('hidden');
      }

    });
  }
});

.hidden { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="searchInp" type="text" name="search"/>
<div class="myClass">
  <ul>
    <li>computer</li>
    <li>mobile</li>
  </ul>
</div>

<div class="myClass">
  <ul>
    <li>car</li>
    <li>jeep</li>
  </ul>
</div>

Answer 2

1：如果您要隐藏页面中的所有li并仅显示具有与输入值匹配的任何字母的li，请尝试使用此代码

$('.input').on('keyup', function () {
  $('li').hide();
  $('li[class*="' + $(this).val() + '"]').show();
});

https://jsfiddle.net/Lvfuk1q0/1/

2：如果您想显示所有li并仅隐藏与输入值字母不匹配的人（在keyup事件上），那么您可以使用此一个

$('.input').on('keyup', function () {
  $('li').hide();
  $('li[class*="' + $(this).val() + '"]').show();

  if($(this).val().length == 0) {
    $('li').show();
  }
});

https://jsfiddle.net/Lvfuk1q0/2/

注意：

如果您想显示li只有开始的输入值，请将class*更改为class^。

在li元素上搜索字符串然后隐藏如果没有找到的lionly类

2 个答案:

注意：