Question

我想要突出显示任何类以a_slot_开头但在任何类名中都不以pink或green结尾的元素。在此示例中，我应该突出显示第三个元素，因为它具有类a_slot_orange而另一个类不包含pink或green。

为什么第三个元素没有突出显示（但最后一个是）？如何与其他人一起突出显示第三个？

＆＃13;

$(document).ready(function() {
  $("[class^='a_slot_']").each(function(i,v){
     if(!$(this).attr('class').includes('green') && !$(this).attr('class').includes('pink')){
$(this).css('background-color', 'red');
     }
  });
  // also don't work....have the same result
  //$("[class^='a_slot_']:not([class$='green'],[class$='pink'])").css('background-color', 'red');
  //$("[class^='a_slot_']").not("[class$='green'],[class$='pink']").css('background-color', 'red');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class='a_slot a_slot_green'>Green</p>
<p class='a_slot a_slot_pink'>Pink</p>
<p class='a_slot a_slot_orange'>Orange (shouldn't I be highlighed too?)</p>
<p class='a_slot_green'>Green</p>
<p class='a_slot_pink'>Pink</p>
<p class='a_slot_orange'>Orange</p>
<p class='a_slot_4'>4</p>
<p class='a_slot_16'>16</p>
<p class='a_slot_16 other_class'>16</p>
<p class='a_slot_orange other_class'>Orange</p>

＆＃13;

Answer 1

使用您的选择器[class^='a_slot_']，您只选择其class属性以该字符串开头的元素，这样您就不会选择前三个元素，因此您可以将其更改为[class^='a_slot']，之后您可以为每个元素拆分class属性元素并使用some()来查找匹配。

＆＃13;

$("[class^='a_slot']").each(function(i, v) {
  var cls = $(this).attr('class').split(' ')
  var check = cls.some(function(e) {
    return e.startsWith('a_slot_') && !e.endsWith('green') && !e.endsWith('pink')
  })
  if (check) $(this).css('background', 'red')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='a_slot a_slot_green'>Green</p>
<p class='a_slot a_slot_pink'>Pink</p>
<p class='a_slot a_slot_orange'>Orange (shouldn't I be highlighed too?)</p>
<p class='a_slot_green'>Green</p>
<p class='a_slot_pink'>Pink</p>
<p class='a_slot_orange'>Orange</p>
<p class='a_slot_4'>4</p>
<p class='a_slot_16'>16</p>
<p class='a_slot_16 other_class'>16</p>
<p class='a_slot_orange other_class'>Orange</p>

＆＃13;

Answer 2

使用时：

$("[class^='a_slot_']")

您只选择使用a_slot_ 开始的元素，但第三个元素以a_slot开头（不含以下_）。

为此你应该使用$("[class*='a_slot_']")

Answer 3

您可以使用 jQuery.filter

$("[class^='a_slot']").filter(
     function(){
      var matches = $(this).attr('class').match(/pink|green/g);
           return !matches;
     }
).css('background-color', 'red');

啊，是的，因为其他人指出你的选择器太贪心我已经删除了下划线

https://jsfiddle.net/py89zr5y/1/

Answer 4

这样做是因为^表示字符串的开头。

<p class='a_slot_orange a_slot'>Orange (shouldn't I be highlighed too?)</p>

jquery选择器缺少元素

4 个答案: