javascript - 使用 jQuery 过滤 div

Question

我想用输入字段过滤一些 div :我想在开头显示所有 div，当用户输入输入字段时，按 <p class="name"></p> 过滤

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input type="text"  class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
  <div class="card all-patients" id="">
    <div class="body">
      <div class="row" id="">
        <div class="col-md-4 col-sm-4 text-center m-b-0">
        </div>
        <div class="col-md-8 col-sm-8 m-b-0">
			<p class="name">John Doe</p>
			<p> 12 ans</p>
			<p> 04 94 94 94 94</p>
			<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id=""  style="visibility: visible; display: block;">
  <div class="card all-patients" id="">
    <div class="body">
      <div class="row" id="">
        <div class="col-md-4 col-sm-4 text-center m-b-0">
        </div>
        <div class="col-md-8 col-sm-8 m-b-0">
			<p class="name">Samuel pelo</p>
			<p> 12 ans</p>
			<p> 04 94 94 94 94</p>
			<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

此解决方案使用包含输入值的名称过滤 div。过滤不区分大小写。此外，没有设置任何类，但如果需要，可以添加它。只需将 $card.show() 更改为 $card.addClass('visible') 并将 $card.hide() 更改为 $card.removeClass('visible').

$(document).ready(function() {
  $('.filter').on('input', function() {
    var $this = $(this);
    var $cards = $('.card');

    $filteredCards = $cards.each(function(i, card) {
      var $card = $(card);
      var name = $card.find('.name').first();
      name = name.text().toLowerCase();

      if(name.indexOf($this.val().toLowerCase()) !== -1) {
        $card.show();
      } else {
        $card.hide();
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
  <div class="card all-patients" id="">
    <div class="body">
      <div class="row" id="">
        <div class="col-md-4 col-sm-4 text-center m-b-0">
        </div>
        <div class="col-md-8 col-sm-8 m-b-0">
          <p class="name">John Doe</p>
          <p> 12 ans</p>
          <p> 04 94 94 94 94</p>
          <button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
  <div class="card all-patients" id="">
    <div class="body">
      <div class="row" id="">
        <div class="col-md-4 col-sm-4 text-center m-b-0">
        </div>
        <div class="col-md-8 col-sm-8 m-b-0">
          <p class="name">Samuel pelo</p>
          <p> 12 ans</p>
          <p> 04 94 94 94 94</p>
          <button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
        </div>
      </div>
    </div>
  </div>
</div>