javascript - 如何只搜索一个div区域的数据？

Question

$(document).ready(function(){

  $(function(){
    var roles = ["Admin", "User", "Dealer", "Agent", "Buyer", "Guest", "User", "Dealer", "Agent"];

    $.each(roles, function(){
      $(".role_wrapper_2").append("<div class='roles_approval'><span>" + this + "</span></div>");
    });
  });

  $(".role-search-approval").on("keyup", function() {
    var value = this.value.toLowerCase();
      $(".roles_approval").each(function() {
          if($(this).text().toLowerCase().indexOf(value) !== -1) {
              $(this).show();
          } else {
              $(this).hide();    
          }
      });
  });


  $(function(){
    $(document).on('click', '.role_wrapper_2 .roles_approval', function(){
      var role= $(this)
      $('.role_wrapper_1').append(role);
      $(this).find("img").attr('src', 'images/02_button_minus.png');
    });
  });

  $(function(){
    $(document).on('click', '.role_wrapper_1 .roles_approval', function(){
      var role = $(this)
      $('.role_wrapper_2').append(role);
      $(this).find("img").attr('src', 'images/02_button_add.png');
    });
  });
});

.role_wrapper_1 {
  width:200px;
  height:200px;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="role_wrapper_1"></div>
<div class="role_wrapper_2">
  <div class="admin2_search">
    <form action="#" method="post">
      <input class="role-search-approval" type="search" placeholder="Enter your keyword">
    </form>
  </div><!-- search_area end  -->
</div>

现在，我有了一个“wrapper_2”区域，并且还具有搜索功能。 如果我点击“wrapper_2”中的元素，该元素将添加到“wrapper_1”中。

但是，当我输入一些关键字进行搜索时，“wrapper_1”和“wrapper_2”都会隐藏错误的日期。

如何才能仅隐藏 div“wrapper_2”下的数据？

Answer 1

您的keyup函数稍作修改如下:

<强> DEMO

$(".role-search-approval").on("keyup", function() {
    var value = this.value.toLowerCase();
      $(".role_wrapper_2 .roles_approval").each(function() { 
          //Just loop for those items which are in .role_wrapper_2
          if($(this).text().toLowerCase().indexOf(value) !== -1) {
              $(this).show();
          } else {
              $(this).hide();    
          }
    });
});

What was happening?

You were just adding one element to wrapper_1 from wrapper_2 and that element contained all the necessary classes while appending and on your $.each even that class was taken count which was appended to wrapper_1. So you just need to say which wrapper's element you need to filter!! By specifying its parent element you can filter those class in $.each