使用jQuery按照其中的内容过滤标签

Question

我想在<a>标签中搜索，只显示符合要求的标签。因此，当您加载页面时，所有<a>标签都是可见的。当您在搜索框中输入内容时，我想按照其中的标题过滤<a>标记。

$('#search').on('keyup', function(e) {
    var search = $(this).val().toLowerCase();
    $('#content').children().children().children("p").each(function() {
        $(this).parent().parent()[search && $(this).text().toLowerCase().match('^' + search) ? 'show' : 'hide']();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
    <div class="content">
            <a>
                <div class="box">
                    <img>
                    <p class="title">John</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <img>
                    <p class="title">Jenny</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <img>
                    <p class="title">Jane</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <img>
                    <p class="title">Jack</p>
                    Other content.
                </div>
            </a>
     </div>

上面的JavaScript不起作用。那么如何按标题过滤？

Answer 1

为此，您可以使用filter()查找不符合搜索要求的.title元素，然后隐藏其父级.box。但请注意，对于不区分大小写的搜索，您需要使用自己的逻辑扩展: jQuery运算符，这是:contains的变体，如下所示：

jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

var $box = $('.box');
$('#search').on('input', function(e) {
  $box.show();
  $('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('.box').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
  <a>
    <div class="box">
      <img>
      <p class="title">John</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <img>
      <p class="title">Jenny</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <img>
      <p class="title">Jane</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <img>
      <p class="title">Jack</p>
      Other content.
    </div>
  </a>
</div>

Answer 2

#content将ID为content的元素作为目标。您将content类分配给div，其目标应为.content。

$('#search').on('keyup', function(e) {
  var search = $(this).val().toLowerCase();
  $('.content').children().children().children("p").each(function() {
    $(this).parent().parent()[search && $(this).text().toLowerCase().match('^' + search) ? 'show' : 'hide']();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
  <a>
    <div class="box">
      <img>
      <p class="title">John</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <img>
      <p class="title">Jenny</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <img>
      <p class="title">Jane</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <img>
      <p class="title">Jack</p>
      Other content.
    </div>
  </a>
</div>

Answer 3

这是工作代码：https://codepen.io/creativedev/pen/PapKjr

$('#search').on('keyup', function(e) {
            var search = $(this).val().toLowerCase();
            $('.content').children().find("p").each(function() {console.log($(this).text());
                $(this).parent().parent()[search && $(this).text().toLowerCase().match('^' + search) ? 'show' : 'hide']();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
    <div class="content">
            <a>
                <div class="box">
                    <img>
                    <p class="title">John</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <img>
                    <p class="title">Jenny</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <img>
                    <p class="title">Jane</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <img>
                    <p class="title">Jack</p>
                    Other content.
                </div>
            </a>
     </div>