JQuery Siblings селектор не работает правильно - PullRequest
Новая
       24

JQuery Siblings селектор не работает правильно

0 голосов
/ 02 мая 2018

Я хочу жить поиск по странице и фильтровать случай соответствия. Из-за этого я использую :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

1 Ответ

0 голосов
/ 02 мая 2018

Если селектор выбрал несколько элементов одновременно, следовательно, тип "h" может привести к результату 3 совпадений, их элементы-братья и сестры будут накладываться друг на друга, что приведет к вашей проблеме. Вы можете использовать :not(:contains) вместо этого. 

$(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');
      } 
    
  })
  
})
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...