jquery - 向多个元素添加类

Question

我是 jquery 的新手，我正在尝试执行以下操作:

我有一个 div 的多个实例。对于每个实例，我随机添加一个类(用于更改某些属性)。添加的类取自列表。

这很好用——但现在我正在尝试将相同的(随机)类另外添加到前一个子 div 中。

我的 html 是:

<div class="random">
    <div class="alsorandom"> </div>
</div>

<div class="random">
    <div class="alsorandom"> </div>
</div>

这是我当前的 jquery(发生随机化，因此 2 个类永远不会相继添加):

var classes = ['blue', 'yellow', 'lightorange', 'violet', 'green'];
var prevClass = "";
$('.randomcolor').each(function() {
    var classes2 = [];
    for (var i = 0; i < classes.length; i++) {
        if (classes[i] !== prevClass) {
            classes2.push(classes[i]);
        }
    }
    $(this).addClass(prevClass = classes2[Math.floor(Math.random()*classes2.length)]);
});

下面的方法我都试过了，还是不行:

$('.randomcolor, .alsorandom').each(function() { ...

如果有任何帮助，我将不胜感激。谢谢。

Answer 1

如果您知道附加元素是第一个元素的直接后代，则可以使用 .children() 方法来获取它。像这样:

prevClass = classes2[Math.floor(Math.random()*classes2.length)];
$(this).addClass(prevClass).children('.alsorandom').addClass(prevClass);

整个代码如下所示:

var classes = ['blue', 'yellow', 'lightorange', 'violet', 'green'];
var prevClass = "";
$('.randomcolor').each(function() {
    var classes2 = [];
    for (var i = 0; i < classes.length; i++) {
        if (classes[i] !== prevClass) {
            classes2.push(classes[i]);
        }
    }
    prevClass = classes2[Math.floor(Math.random()*classes2.length)];
    $(this).addClass(prevClass).children('.alsorandom').addClass(prevClass);
});

如果附加元素是后代，但不一定是直接后代，则使用 .find() 方法而不是 .children() 方法。