Определить специальный класс во время каждого в jQuery

Question

Как проверить, есть ли у всех моих span элементов специальный класс (a, b или c)?

<form id="form"> 
    <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <span class="a b"><span> 
      <span class="b"><span> 
      <span class="b c"><span> 
      <span class="a c"><span> 
      <span class="c"><span> 
     </div> 
    </div> 
</form> 

<script> 
    var class_to_search = 'a'; 
    $('#form > span:not(.'+ class_to_search +')').each(function(i) { 
     $(this).addClass('hide'); 
    }); 
</script> 

Но это не сработает.

Не могли бы вы помочь мне, пожалуйста?

Спасибо.

Answer 1

Все, что вам нужно сделать, это когда вы определяете, какой класс вы хотите, чтобы показать - скрыть все элементы (пролеты), а затем showthe те, которые имеют этот класс.

$(document).ready(function(){ 
 
    $("#selection").change(function(){ 
 
    var elementToShow = $(this).val(); 
 
    $('#contentRow span').hide(); 
 
    $('#contentRow .' + elementToShow).show(); 
 
    }) 
 
});

#contentRow span{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <label for = "selection">Select the element you wish to show</label> 
 
    <select id = "selection"> 
 
    <option selected disabled></option> 
 
    <option>a</option> 
 
    <option>b</option> 
 
    <option>c</option> 
 
    </select> 
 

 
    <hr/> 
 

 
    <div class="row"> 
 
     <div id= "contentRow" class="col-md-10 col-md-offset-1"> 
 
      <span class="a b">test 1 (contains classes a & b)</span> 
 
      <span class="b">test 2 (contains class b)</span> 
 
      <span class="b c">test 3 (contains classes b & c)</span> 
 
      <span class="a c">test 4 (contains classes a & C)</span> 
 
      <span class="c">test 5 (contains class c)</span> 
 
     </div> 
 
    </div> 
 
</form>

Answer 2

Я добавил немного, чтобы показать разницу, но вы можете сделать поиск в области с помощью jQuery, выполнив поиск по выбору .a с дополнительным выбором #form, чтобы его можно было найти быстрее, не пройдя весь дом в каждом проходе.

$(document).ready(function() { 
 
    var class_to_search = '.a'; 
 
    $(class_to_search,'#form').each(function(idx,e) { 
 
     $(e).addClass('show'); 
 
    }); 
 
    });

.a,.b,.c{ 
 
    height: 15px; 
 
    border: 1px solid red; 
 
    width: 15px; 
 
    padding: 5px; 
 
    margin: 0 5px; 
 
    background-color: blue; 
 
} 
 

 
.show{ 
 
    border: 2px solid blue; 
 
    background-color: #000; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <div class="row"> 
 
    <div class="col-md-10 col-md-offset-1"> 
 
     <span class="a b"></span> 
 
     <span class="b"></span> 
 
     <span class="b c"></span> 
 
     <span class="a c"></span> 
 
     <span class="c"></span> 
 
    </div> 
 
    </div> 
 
</form>