Question

我在他们工作的每个部门都有一份工作人员名单。在这个页面的顶部，我有一个搜索框来搜索姓名和一个选择框来选择部门。这很好用。当搜索说"Person4"时，它会隐藏所有其他人，但保留其他部门标题。无论如何，在过滤"Person4"时，隐藏了"Department1"吗？

$('select').change(function() {
  var e2 = $("#dpt").val().toLowerCase();
  var e = new RegExp(e2);
  $(departmentfilter).each(function() {
    if (e.test(this.innerHTML.toLowerCase())) 
      $(this).show();
    else 
      $(this).hide();
  });
});


$('#searchbox').bind('keyup', function() {
  var s2 = this.value.toLowerCase();
  var s = new RegExp(s2);
  $(personfilter).each(function() {
    if (s.test(this.innerHTML.toLowerCase())) 
      $(this).show();
    else 
      $(this).hide();
  });
});

<input type="text" id="searchbox" placeholder="Search Staff">
<select id="dpt">
<option  value="" selected>All Staff</option>
<option value="Department1">Department1</option>
<option value="Department2">Department2</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="departmentfilter"> Department1
  <div id="personfilter">Person1</div>
  <div id="personfilter">Person2</div>
  <div id="personfilter">Person3</div>
</div>
<div id="departmentfilter"> Department2
  <div id="personfilter">Person4</div>
  <div id="personfilter">Person5</div>
  <div id="personfilter">Person6</div>
</div>

Answer 1

首先，您需要使用类而不是重复id，因为标识符在同一文档中应该是唯一的：

<div class="departmentfilter"> Department1
  <div class="personfilter">Person1</div>
  <div class="personfilter">Person2</div>
  <div class="personfilter">Person3</div>
</div>
<div class="departmentfilter"> Department2
  <div class="personfilter">Person4</div>
  <div class="personfilter">Person5</div>
  <div class="personfilter">Person6</div>
</div>

然后你可以隐藏所有的部分，只显示相关的部分，如：

$('.departmentfilter').hide(); //Hide all departments
$(this).closest('.departmentfilter').show(); //Show the related one

＆＃13;

$('select').change(function() {
  var e2 = $("#dpt").val().toLowerCase();
  var e = new RegExp(e2);

  $('.departmentfilter').each(function() {
    if (e.test(this.innerHTML.toLowerCase()))
      $(this).show();
    else
      $(this).hide();
  });
});

$('#searchbox').bind('keyup', function() {
  var s2 = this.value.toLowerCase();
  var s = new RegExp(s2);

  $('.departmentfilter').hide(); //Hide all departments

  $('.personfilter').each(function() {
    if (s.test($(this).text().toLowerCase())) {
      $(this).show();
      $(this).closest('.departmentfilter').show(); //Show the related one
    } else
      $(this).hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="searchbox" />
<select id="dpt">
  <option  value="" selected>All Staff</option>
  <option value="Department1">Department1</option>
  <option value="Department2">Department2</option>
</select>
<br>
<div class="departmentfilter"> Department1
  <div class="personfilter">Person1</div>
  <div class="personfilter">Person2</div>
  <div class="personfilter">Person3</div>
</div>
<div class="departmentfilter"> Department2
  <div class="personfilter">Person4</div>
  <div class="personfilter">Person5</div>
  <div class="personfilter">Person6</div>
</div>

＆＃13;

如何隐藏子元素时删除div元素

1 个答案: