jquery selector missing element

Question

I want to highlight any element that has a class that starts with a_slot_ but doesn't end with pink or green in any of the class names. In this example the third element I feel like should be highlighted because it has class a_slot_orange and the other class doesn't contain pink or green.

Why isn't the third element highlighted (but the last is)? How do I highlight the third with the others?

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

@depperm but you're using the attribute starts with selector — billyonecan, May 22 '17 at 14:28
of course it does. the attribute in this case is class, the value of which is just a string. the selector doesn't check what each class starts with, it checks what the value starts with - [docs](https://api.jquery.com/attribute-starts-with-selector/) — billyonecan, May 22 '17 at 14:31

Nenad Vracar · Accepted Answer · 2017-05-22T23:22:04.170

With your selector [class^='a_slot_'] you only select elements whose class attribute starts with that string so you wont select first three elements so you can change that to [class^='a_slot'] and after that you can split class attribute for each element and use some() to find match.

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

You can also just use two attribute selectors, which is probably more efficient (and can be ported to CSS). See the duplicate link. — BoltClock, May 23 '17 at 02:59

score 1 · Answer 2 · answered May 22 '17 at 14:26

1

When you use:

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

you select only elements that starts with a_slot_, but the third element is start with a_slot (without the following _).

For that you should use $("[class*='a_slot_']")

answered May 22 '17 at 14:26

amhev

313
1
3
12

andrew · Answer 3 · 2017-05-22T14:36:49.053

1

you can use jQuery.filter for that

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

Ah, yes as others pointed out your selector is too greedy I've removed the underscore

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

edited May 22 '17 at 14:36

answered May 22 '17 at 14:26

andrew

9,313
7
30
61

score 0 · Answer 4 · answered May 22 '17 at 14:26

0

Make it like this because ^ indicates start of string.

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

answered May 22 '17 at 14:26

error404

331
1
8

jquery selector missing element

4 Answers4