如何应用jQuery CSS Selector

时间:2016-05-24 17:39:07

标签: javascript jquery html css

我正在尝试在div上应用jquery选择器,它是从javaScript Loop

动态创建的

Div是从for循环分配类创建到每个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>');
    }       
});

1 个答案:

答案 0 :(得分:3)

您可以像以下一样使用attribute starts with selector

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