javascript - 向具有特定类的 div 的所有子项添加类不起作用

Question

我正在尝试在几个具有特定类的 div 中添加 div，即 ".description"。
然后，我希望每个内部 div 都有一个不同的类，但它仅适用于具有上述类的第一个 div。
这是代码:

function addDescriptionFields() {
    var i=0;
    for(i=1; i<=3; i++) {
        $(".description").append("<div></div>");
    }
    $(".description").each(function() {
        $(".description div").eq(0).addClass("game-name");
        $(".description div").eq(1).addClass("game-description");
        $(".description div").eq(2).addClass("game-popularity");
    });
}

因此，结果是具有类 ".description" 的第一个 div 中包含所有具有指定类的 div，但其他 div 没有。有人知道我做错了什么吗？

Answer 1

each() 循环是无用的，因为您在其中执行 $(".description div").eq(0)，它只选择该集合中的第一个元素，而不是每个 .description 中的第一个元素。

你必须把它改成这样

function addDescriptionFields() {

    for(var i=1; i<=3; i++) {
        $(".description").append("<div></div>");
    }
    $(".description").each(function() {
        $("div", this).eq(0).addClass("game-name");
        $("div", this).eq(1).addClass("game-description");
        $("div", this).eq(2).addClass("game-popularity");
    });
}

更好的方法是做

function addDescriptionFields() {
    var classes     = ["game-name", "game-description", "game-popularity"],
        description = $(".description");

    $.each(classes, function(_, klass) {
        description.append("<div class='"+klass+"' />");
    }
}