Question

美好的一天！

我在jQuery中比较新，或者任何相关的脚本。我尝试了几种方法，但似乎无法获得我想要的效果。

我想要的是：

获取元素列表，在这种情况下为div
为其中的5个

我设法分配了唯一的类，但这涉及运行5次新函数。有时同一个div会有多个类。

到目前为止我的代码：

＆＃13;

var places2beObj = $('#blokken_clubinfo > div');

$.makeArray(places2beObj);


console.log(places2beObj);

function randomPlace2be1() {
  var randomPlace = places2beObj[Math.floor(Math.random() * places2beObj.length)];
  $(randomPlace).addClass("random1", function() {
    places2beObj.splice(randomPlace, 1);
  });
}

function randomPlace2be2() {
  var randomPlace = places2beObj[Math.floor(Math.random() * places2beObj.length)];
  $(randomPlace).addClass("random2", function() {
    places2beObj.splice(randomPlace, 1);
  });
}

randomPlace2be1()
randomPlace2be2()

＆＃13;

Answer 1

如果div有一个共同的类，那么以下函数将是有用的

$('.common').each(function (i) {
    $(this).addClass('common-' + i);
});

Answer 2

var places2beObj = $('#blokken_clubinfo > div').get(), // returns an array with all selected divs
    length = places2beObj.length,
    classes = ['large1', 'large2', 'small1', 'small2', 'wide'], // define the classes to apply
    randoms = [];

for (var num, l = length, i = 0; i < 5 && i < l; i++) {
    do { num = Math.floor(Math.random() * length) } // get a random num
    // when element is already choosen get another num
    while ($.inArray(places2beObj[num], randoms) != -1);
    randoms.push(places2beObj.splice(num, 1)); // snip out element and push it into randoms array
    $(randoms[i]).addClass(classes[i]); length--; // add class and decrement length
};

现在，randoms-array包含五个随机选择的元素，并添加了一个新类，并且这些元素将从places2beObj-array中删除。如果您不想从那里删除它们，但只是随机添加类for-loop，如下所示：

for (var num, i = 0; i < 5 && i < length; i++) {
    do { num = Math.floor(Math.random() * length) } // get a random number
    // when number is already choosen get another number
    while ($.inArray(num, randoms) != -1);
    $(places2beObj[num]).addClass(classes[i]);
    randoms.push(num); // push num into randoms to remember what has been choosen already
};

现在有五个元素有一个随机类，并且randoms在places2beObj中保存这些元素的索引。

编辑：根据您的评论：它只是一个非常基本的javascript for-loop。首先，一个名为i的变量被定义为0;中间是条件i < 5（= i必须小于5）。只要条件为真，{}内的代码就会一次又一次地执行。每次执行后，我都会增加1（i++ == i += 1）。现在我做了5个步骤：0 - ＆gt; 1 - ＆gt; 2 - ＆gt; 3 - ＆gt; 4 - ＆gt; 5：第五步之后条件为假，因为5不小于5，循环停止。

$.inArray(element, array)是一个jQuery函数，它查看一个元素（可以是任何东西：DOM-element，Number，String，...）是否是数组的成员。如果发现该函数返回索引（=一个数字，告诉它在数组中的哪个位置）。如果未找到，则该函数返回-1。我们在这里使用它来检查是否已经选择了一个元素（或一个随机数），以避免一个元素获得两个以上的类。

编辑2 ：为避免在places2beObj少于五个元素时崩溃，我添加了一点安全性。工作FIDDLE here显示九个div，每次运行时，其中五个随机着色。假设你只使用这里显示的两个for循环中的一个。

jQuery：从数组中获取随机项并分配一次类

2 个答案: