Question

我想在页面中搜索并过滤匹配案例。因此我使用:contains来搜索页面中的文本。首先，我想找到与搜索文本匹配的.col-3，之后我想要hide其他兄弟元素。现在我理解siblings()无法正常工作。这是一个示例代码：

$(document).ready(function(){

  $(':text').on('change paste keyup',function(){
     var val = $(this).val();
     $('.col-3').css({'background':'#fff','color':'#000'});  

     if(val != ''){
         var el = $('.col-3:contains('+val+')').css('color','blue');
         el.siblings('.col-3').css('background','red');
     } 

  })

 })

我该怎么办？

这是完整代码

https://codepen.io/essvision/pen/MGmZKq?editors=1010

Answer 1

如果选择器同时选择多个项目，则键入＆＃34; h＆＃34;可能导致3个匹配结果，他们的兄弟项目将相互重叠，这会导致您的问题。您可以改用:not(:contains)。

＆＃13;

$(document).ready(function(){
  
  $(':text').on('change paste keyup',function(){
      var val = $(this).val();
      $('.col-3').css({'background':'#fff','color':'#000'});  
    
      if(val != ''){ 
          var el = $('.col-3:contains('+val+')').css('color','blue'); 
          $('.col-3:not(:contains('+ val +'))').css('background','red');
      } 
    
  })
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <input type="text">
  
  <div class="row">
    <div class="col-3">
      <h3>ehsan</h3>
      <p>expert</p>
    </div>
    <div class="col-3">
      <h3>mahdi</h3>
      <p>employee</p>
    </div>
    <div class="col-3">
      <h3>farhad</h3>
      <p>manager</p>
    </div>
    <div class="col-3">
      <h3>sara</h3>
      <p>employee</p>
    </div>
  </div>
  
</body>
</html>

＆＃13;

jQuery兄弟姐妹选择器无法正常工作

1 个答案: