使用 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>

Answer 2

• 假设您需要使用 startsWith 进行过滤。
• 使用类hide隐藏元素。
• 遍历每个.body元素。
• 使用此选择器查找元素 [class="name"] .
• 使用startsWith函数比较文本。

看看这个代码片段。

//<p class="name">John Doe</p>
$('#myInput').on('input', function() {
  var enteredValue = $(this).val();
  $('.body').each(function() {
    var $parent = $(this);
    $(this).find('[class="name"]').each(function() {
      if ($(this).text().startsWith(enteredValue)) {
        $parent.removeClass('hide');
      } else {
        $parent.addClass('hide');
      }
    })
  });
});

.hide {
  display: none
}

<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" 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>

看到了吗？正在过滤元素。