jquery选择器缺少元素[重复]答案

【问题标题】：jquery selector missing element [duplicate]jquery选择器缺少元素[重复]
【发布时间】：2017-05-23 10:58:02
【问题描述】：

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

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

$(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');
});

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

【问题讨论】：

前3段不以a_slot_开头
你可能想使用$("[class*='a_slot_']")。
@Gerard 我知道，但是第二课可以
@depperm 但您使用的是以选择器开头的属性
@billyonecan 我认为课程的顺序无关紧要

标签： javascript jquery html jquery-selectors

【解决方案1】：

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

$("[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')
});

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

【讨论】：

您也可以只使用两个属性选择器，这可能更有效（并且可以移植到 CSS）。请参阅重复链接。

【解决方案2】：

使用时：

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

您只选择以a_slot_ 开头 的元素，但第三个元素以a_slot 开头（不包括以下_）。

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

这样写是因为 ^ 表示字符串的开始。

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

【讨论】：