用jQuery过滤div

时间:2018-02-04 14:01:38

标签: javascript jquery html

我想用输入字段过滤一些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>

2 个答案:

答案 0 :(得分:1)

  • 假设您需要使用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>

请参阅?这些元素正在被过滤。

答案 1 :(得分:0)

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

&#13;
&#13;
$(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();
      }
    });
  });
});
&#13;
<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>
&#13;
&#13;
&#13;