Question

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

我有一个div的多个实例。每个实例我随机添加一个类（用于更改某些属性）。添加的类从列表中获取。

这很好用 - 但现在我正在尝试另外将相同的（随机）类添加到前一个的child-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()方法。

Answer 2

看到你的HTML，而不是这个：

$('.randomcolor, .alsorandom')

这样做：

$('.random, .alsorandom')

在这里演示：http://jsfiddle.net/edgarinvillegas/vYL55/2/

干杯

Answer 3

您可以使用jQuery .each（）执行此操作：

var classes = ["blue", "red", "green"];

$(".random").each(function(){
    var $this = $(this);
    var classIndex = Math.floor(Math.random()*(classes.length));
    alert(classIndex);
    $this.addClass(classes[classIndex]);
});

使用实例

查看此fiddle

将类添加到多个元素

3 个答案: