Question

＆＃13;

$(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');
    });
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

现在，我有一个＆＃34; wrapper_2＆＃34;区域，也有搜索功能。如果我点击＆＃34; wrapper_2＆＃34; ，该项目将添加到＆＃34; wrapper_1＆＃34;。

然而，当我输入一些关键词来搜索时，＆＃34; wrapper_1＆＃34;和＆＃34; wrapper_2＆＃34;将隐藏错误的一天。

我该怎么做才能隐藏div下的数据＆＃34; wrapper_2＆＃34;？

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();    
          }
    });
});

发生了什么事？

您只是从wrapper_1和wrapper_2向$.each添加了一个元素   该元素包含所有必要的类，同时追加和   在你的wrapper_1上，即使该课程已经被附加到了   wrapper's。所以你只需要说出你的element元素   需要过滤!!通过指定其父class，您可以过滤   $.each
中的那些{{1}}

如何仅在一个div区域中搜索数据？

1 个答案: