Как применить JQuery CSS Selector

Question

Я пытаюсь применить селектор JQuery на DIV, который динамически создается из JavaScript Loop

Див являются созданные из для петель класса присвоит каждому DIV

minus = textbox1 - textbox2; 

var count = 0; 
var a; 
for (x = textbox1; x >= minus; x--) { 
    a = count++; 
    $('body').append('<div class="drag' + a + '" >' + x + '</div>'); 
} 

сейчас пытаюсь добавить селектор CSS на них, но он не работает

var colors = ["#42ae18","#eabc00","#147cc4","#FF6EB4","#ed4329","#8d33aa","#00b971","#e9681b","#a2b3d4","#0b863c","#eabc00","#7027a5","#c83131","#00a1de","#0bc1b6","#FF6EB4","#10a0b6","#FF6EB4","#eedfd3","#362819","#FFD700"]; 
var i = 0; 
$(".drag").each(function(){ 
    $(this).css("color",colors[i]); 
    if(i == colors.length-1) 
    { 
     i = 0; 
    } 
    else 
    { 
     i++;  
    } 
}); 

полный код приводится ниже

$("#submitBtn").click(function(){  
    var x; 
    var minus; 
    var textbox1= new Number($("#value1").val()); 
    var textbox2= new Number($("#value2").val());  

    var colors = ["#42ae18","#eabc00","#147cc4","#FF6EB4","#ed4329","#8d33aa","#00b971","#e9681b","#a2b3d4","#0b863c","#eabc00","#7027a5","#c83131","#00a1de","#0bc1b6","#FF6EB4","#10a0b6","#FF6EB4","#eedfd3","#362819","#FFD700"]; 
    var i = 0; 
    $(".drag").each(function(){ 
     $(this).css("color",colors[i]); 
     if(i == colors.length-1) 
     { 
      i = 0; 
     } 
     else 
     { 
      i++;  
     } 
    }); 

    minus=textbox1-textbox2; 

    var count=0; 
    var a; 
    for(x=textbox1;x>=minus;x--){ 
     a=count++; 
     $('body').append('<div class="drag'+a+'" >' +x+ '</div>'); 
    }  
}); 

Answer 1

Вы можете использовать attribute starts with selector, как показано ниже.

var colors = ["#42ae18", "#eabc00", "#147cc4", "#FF6EB4", "#ed4329", "#8d33aa", "#00b971", "#e9681b", "#a2b3d4", "#0b863c", "#eabc00", "#7027a5", "#c83131", "#00a1de", "#0bc1b6", "#FF6EB4", "#10a0b6", "#FF6EB4", "#eedfd3", "#362819", "#FFD700"]; 
 
var i = 0; 
 
$("[class^=drag]").each(function() { //change selector here 
 
    $(this).css("color", colors[i]); 
 
    if (i == colors.length - 1) { 
 
     i = 0; 
 
    } 
 
    else { 
 
     i++; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="drag0">!!!!!</div> 
 
<div class="drag1">!!!!!</div> 
 
<div class="drag2">!!!!!</div> 
 
<div class="drag3">!!!!!</div> 
 
<div class="drag4">!!!!!</div> 
 
<div class="drag5">!!!!!</div> 
 
<div class="drag6">!!!!!</div> 
 
<div class="drag7">!!!!!</div> 
 
<div class="drag8">!!!!!</div>