在每個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

所有你需要做的是，當你確定你想顯示其類 - 隱藏所有元素（跨度），然後綜藝節目那些有類。

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

我加了一下以示區別，但你可以通過使用一個子選擇#form做你的搜索選擇.a做作用域在使用jQuery的DOM的搜索，以便它可以被發現，而無需遍歷整個DOM每遍更快。

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