jQuery:如何在文本搜索中只显示DOM的特定元素

jQuery: how to show only specific elements of the DOM in a text search

本文关键字：DOM 显示 元素 搜索 文本 jQuery      更新时间：2023-09-26

我正在开发文本搜索功能，希望只显示DOM的特定元素：当用户键入搜索词时，只应显示class="accordion"的div及其子、孙等，这些div在其孙子的文本中包含搜索词。我尝试了以下操作，结果是，无论何时输入搜索词，都不会显示任何元素。

 $('#search-criteria').on('keyup', function() {
    var g = $(this).val().toLowerCase();
    $('.panel-info').each(function() {
        var s = $(this).text().toLowerCase();
       if (s.indexOf(g) !== -1) {
        $(this).parentsUntil('.accordion').show();
        $(this).parentsUntil('.accordion').addClass('sh');
       }
       else if ($(this).hasClass('sh') === false && (s.indexOf(g) === -1)) 
       {
        $(this).parentsUntil('.accordion').hide();
       }
    });
});

以前我也尝试过这个，而不是if/else，它看起来更优雅，但也不起作用：

$(this).parentsUntil('.accordion')[ s.indexOf(g) !== -1 ? 'show' : 'hide' ]();

请在这里找到小提琴jsfiddle.net/vwZ

使用jQuery的[:contains选择器][1]选择符合搜索条件的节点并显示它们，然后隐藏其余节点。

假设您想搜索.accordion类的元素并显示或隐藏它们，那么您可以执行以下操作：

$('#search-criteria').on('change', function() {
  var val = $(this).val();
  $('.accordion').find(':contains(' + val + ')').show();
  $('.accordion').find(':not(:contains(' + val + '))').hide();
}).on('keyup', function() {
  $(this).change();
});

这个片段基本上找到了类为accordion、find的所有元素——它们的子元素contains是输入值，show()是它们。之后，它执行相同的操作，但是find的元素执行not的contains的输入并且hide()的元素。

不幸的是，jQuery附带的选择器区分大小写。如果你想让你的代码不区分大小写，你可以创建自己的选择器，如下所示：

$.expr[":"].icontains = $.expr.createPseudo(function(arg) {
  return function (elem) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

在这里，我创建了一个名为icontains的选择器，它在比较字符串之前将字符串转换为大写。如果要使用icontains，请记住更改上面示例中的两个contains。

相关文章：