mod geek mod geek - 6 months ago 19
CSS Question

How To Apply jQuery CSS Selector

I am trying to apply jquery selector on the div which are dynamically created from javaScript Loop

Div's are created from for loop assign class to each 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>');
}


now I am trying to add the css selector on these but it is not working

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++;
}
});


the complete code is given below

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

You can use attribute starts with selector like following.

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>

Comments