jquery - 如何将类添加到类名不在数组中的元素

Question

我正在尝试将“禁用”类添加到类名不在数组中的元素，并且我有一个如下所示的数组输出:

["xs", "xl", "s", "m"]

和 html 标记如下:

<a href="js:;" class="pa_size xs" title="xs" data-select="pa_size" data-value="xs">XS</a>
<a href="js:;" class="pa_size xl" title="xl" data-select="pa_size" data-value="xl">XL</a>
<a href="js:;" class="pa_size s" title="s" data-select="pa_size" data-value="s">S</a>
<a href="js:;" class="pa_size m" title="m" data-select="pa_size" data-value="m">M</a>
<a href="js:;" class="pa_size l" title="l" data-select="pa_size" data-value="l">L</a>

我尝试过这样的事情:

if ( $.inArray(val, array) !== -1 ) { ... }

或

$.each(array, function() { ... }

但运气不好。

Answer 1

生成multiple class selector使用数组并使用 :not() 避免它们 伪类或 not() jQuery 中的方法。

var classes = ["xs", "xl", "s", "m"];

$('a').not(classes.map(function(v) {
  // iterate and add `.` before each element
  return '.' + v; 
  // join using `,` to act them as multi selector
}).join(',')).addClass('class')

.class {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="js:;" class="pa_size xs" title="xs" data-select="pa_size" data-value="xs">XS</a>
<a href="js:;" class="pa_size xl" title="xl" data-select="pa_size" data-value="xl">XL</a>
<a href="js:;" class="pa_size s" title="s" data-select="pa_size" data-value="s">S</a>
<a href="js:;" class="pa_size m" title="m" data-select="pa_size" data-value="m">M</a>
<a href="js:;" class="pa_size l" title="l" data-select="pa_size" data-value="l">L</a>

<小时/>

或者像@charlietfl建议的那样更简单

var classes = ["xs", "xl", "s", "m"];

$('a').not('.' + classes.join(',.')).addClass('class')

.class {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="js:;" class="pa_size xs" title="xs" data-select="pa_size" data-value="xs">XS</a>
<a href="js:;" class="pa_size xl" title="xl" data-select="pa_size" data-value="xl">XL</a>
<a href="js:;" class="pa_size s" title="s" data-select="pa_size" data-value="s">S</a>
<a href="js:;" class="pa_size m" title="m" data-select="pa_size" data-value="m">M</a>
<a href="js:;" class="pa_size l" title="l" data-select="pa_size" data-value="l">L</a>