过滤扩展列表jquery中的元素

Question

我遇到这种情况：

在我的输入文本中，我设置了一个过滤功能，但这不是我想要显示的内容。我想隐藏所有不包含输入字符串的类.filter的div（或链接）（在这种情况下，我只有元素＆＃34; A＆＃34;）。 我怎么能得到它？ 这是我现在的过滤功能：

    function filter(element) {
        var value = $(element).val();
        $("#theList > div").each(function () {
            if ($(this).text().indexOf(value) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
    });
}

HTML代码：https://jsfiddle.net/0asx3nhL/26/

Answer 1

第一个问题是过滤功能实际上并未运行。

第二个是您在查找文本时定位错误的元素。您正在查看div，但要过滤的文本位于该div内的锚点（<a>）元素内。

工作小提琴： https://jsfiddle.net/0asx3nhL/30/

代码的关键元素如下：

1）更改＆＃34;过滤器＆＃34; function是一个事件处理程序，用于监听搜索框的更改。我已经使用了keyup事件，因此在您键入时会发生更改。

2）更改＆＃34;每个＆＃34;的选择器循环，以便它定位锚点，锚点使用特定的类 - ＆＃34; list-group-item＆＃34;来识别。

$(function() {
  $('.list-group-item').on('click', function() {
    $('.glyphicon', this)
    .toggleClass('glyphicon-chevron-right')
    .toggleClass('glyphicon-chevron-down');
  });

  $("#filtra").change(function (e) {
    var value = $(this).val();
    $("#theList .list-group-item").each(function() {
      if ($(this).text().indexOf(value) > -1) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});