javascript - jquery 选择器缺少元素

标签 javascript jquery html jquery-selectors

<分区>

我想突出显示具有以 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>

最佳答案

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

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

关于javascript - jquery 选择器缺少元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44115244/

上一篇：javascript - 可能的错误 - 在 widget.set ('options' 后触发事件更改，[])

下一篇：javascript - Leaflet.js - 找出选定的覆盖

相关文章：

html - Twitter Bootstrap 生成空白空间

javascript - 如何在 Cypress 中与带有 2 个 handle 的价格 slider 进行交互？

jquery - Django中通过AJAX发送模型数据

javascript - 我们可以将图像添加到文本区域吗？如果是这样怎么办？

javascript - 谷歌可视化 : filtered selection items

javascript - 标题的固定高度和变化宽度(HTML 表格)

javascript - 如何使用 jquery 将单选按钮值存储在 sessionStorage 中

javascript - 字体大小变化问题

javascript - 当托管在服务器上时，如何使 Vue.JS 项目正常工作？

javascript - 如果代码正确，按钮单击重定向