在每个 jQuery 中检测到一个特殊的 class

Question

如何检查我的所有 span 元素是否都有特殊的 class（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

我添加了一点以显示差异，但您可以在 dom 和 jquery 中进行范围搜索，方法是在搜索选择器 .a 中使用子选择 #form 这样可以更快地找到它而无需遍历整个 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>

Answer 2

您需要做的就是确定要显示的 class - 隐藏所有元素（跨度），然后显示具有该 class 的元素。

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

在每个 jQuery 中检测到一个特殊的 class

Detect a special class during a each into jQuery

each

jquery