jquery selector élément manquant

Question

Je souhaite mettre en surbrillance tout élément dont la classe commence par a_slot_ mais ne se termine pas par pink ou green dans l'un des noms de classe. Dans cet exemple, le troisième élément que je sens devrait être mis en évidence car il a la classe a_slot_orange et l'autre classe ne contient pas pink ou green.

Pourquoi le troisième élément n'est-il pas mis en évidence (mais le dernier est)? Comment mettre en évidence le troisième avec les autres?

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

Answer 1

Lorsque vous utilisez:

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

vous sélectionnez uniquement les éléments qui commence avec a_slot_, mais le troisième élément est de commencer avec a_slot (sans _ suivante).

Pour que vous devez utiliser $("[class*='a_slot_']")

Answer 2

vous pouvez utiliser jQuery.filter pour que

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

Ah, oui comme d'autres ont fait votre sélection est trop gourmand, je l'ai enlevé le trait de soulignement

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

Answer 3

Faire comme ça parce que^indique le début de la chaîne.

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

Answer 4

Avec votre sélecteur [class^='a_slot_'] vous sélectionnez uniquement les éléments dont l'attribut class commence par cette chaîne si vous sélectionnez wont trois premiers éléments de sorte que vous pouvez changer cela à [class^='a_slot'] et après que vous pouvez diviser l'attribut de classe pour chaque élément et utiliser some() trouver le 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>