Question

        var svg = document.getElementById("svg");          
        var isToggled = svg.classList.contains("toggled");     
        if (!isToggled) {
            $(".svg:first").addClass("svg toggled");
        } else {
                i++
                $(".svg:first").next(i).addClass("svg toggled");
        }

所以基本上，有5个svg标签，其中class和id命名为＆＃34; svg＆＃34;，我想将类名更改为＆＃34; svg toggled＆＃34;逐一。在momoent，它只更改第一个和第二个svg的类名，然后在此之后停止。

如何为所有svg标签逐个添加类名？

Answer 1

使用.nextAll([selector])定位第一个匹配元素后的所有兄弟姐妹：

$(".svg:first").nextAll().addClass("svg toggled");

Answer 2

对else的以下更改会将类添加到其余元素中，每个元素之间延迟半秒

else {
    $(".svg:not(:first)").each(function(i, element){
        setTimeout(function(){
            $(element).addClass("toggled");
        }, 500*i); // 500 is the delay in milliseconds
    });
}

在https://jsfiddle.net/gaby/rh9t15r3/21/

更新了演示

Answer 3

你需要一个循环来逐一做某事：

// This creates an array of all the svg elements
var svg = $("#svg");

//Loop the svg-array
$.each(svg, function() {
    // Check if the current element already has a "toggled" class
    if(!$(this).hasClass("toggled") {
        // Add it if not.
        $(this).addClass("svg toggled");
    }
    else {
        i++; // whatever i is
        // If the current svg already has the "toggled" tag you do not have to add it, right?
    }
}

JQuery next（）addClass（）一个接一个

3 个答案: