使用jQuery随机化一系列div元素

Question

我正在尝试使用jQuery执行我的第一步,但是我很难理解如何从div父元素中查找子元素列表.我习惯使用ActionScript 2和ActionScript 3,所以我可能会误解一些概念,比如用jQuery随机化一系列div元素的更好方法!

我有这个简单的HTML代码部分:

<div class="band">
    <div class="member">
        <ul>
            <li>John</li>
            <li>Lennon</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>Paul</li>
            <li>McCartney</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>George</li>
            <li>Harrison</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>Ringo</li>
            <li>Starr</li>
        </ul>
    </div>
</div>

我尝试过一些方法来做这个,比如map .member divs在一个数组中,然后更改排序顺序但没有成功.

function setArrayElements (element_parent) {
    var arr = [];
    //alert (element_parent[0].innerHTML);
    for (var i = 0; i < element_parent.children().length; i ++) {
        arr.push (element_parent[i].innerHTML);
    }
}
setArrayElements($(".band"));

当我试图提醒element_parent [0]时,我想要得到我的.member成员名单的第一个孩子,但事实并非如此.

如果我使用element_parent [0] .innerHTML发出警报,我会看到:

<div class="member">
    <ul>
        <li>John</li>
        <li>Lennon</li>
    </ul>
</div>
<div class="member">
    <ul>
        <li>Paul</li>
        <li>McCartney</li>
    </ul>
</div>
<div class="member">
    <ul>
        <li>George</li>
        <li>Harrison</li>
    </ul>
</div>
<div class="member">
    <ul>
        <li>Ringo</li>
        <li>Starr</li>
    </ul>
</div>

为什么？我怎样才能准确地得到这样的一个成员？

<div class="member">
    <ul>
        <li>Paul</li>
        <li>McCartney</li>
    </ul>
</div>

我敢肯定这应该很容易,但我只是不知道如何:(

请帮助
感谢
vittorio

---

编辑:

感谢牢固性以及各种方式来吸引选定的孩子,我将会记录这些未来的方式!
我尝试了这种方法,但似乎我无法得到整个div(请告诉我,如果我弄错了,它可能太多了!).

我得到这个内容:

<div class="member">
    <ul>
        <li>Ringo</li>
        <li>Starr</li>
    </ul>
</div>

但是使用其中一种方法,如$("div.band div.member:eq(2)")或其他有用的方法,我得到这个:

alert ($('div.band div.member')[0]);
/* result
<ul>
    <li>Ringo</li>
    <li>Starr</li>
</ul>
*/

那么有没有办法在我的节点中获得.member div容器？

Answer 1

$('div.band div.member');

将为您提供一个jQuery对象,其中包含<div>匹配选择器,即div与类member是div的后代与类band.

jQuery对象是一个类似于数组的对象,因为每个匹配的元素都被赋予了一个对象的数字属性(就像索引一样),并且length还定义了一个属性.获得一个元素是

// first element
$('div.band div.member')[0];

要么

// first element
$('div.band div.member').get(0);

您可以指定根据DOM中的位置选择特定元素,而不是选择所有元素.例如

// get the first div with class member element
$("div.band div.member:eq(0)")

要么

// get the first div with class member element
$("div.band div.member:nth-child(1)")

编辑:

这是我刚刚淘汰的一个插件

(function($) {

$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.detach(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
})(jQuery);

这是一个工作演示.添加/编辑 URL以查看代码.如果您需要有关其工作原理的任何详细信息,请发表评论.这可能会使得处理某些情况变得更加健壮(例如,如果插件是jia对象的其他子元素,那么它)将适合您的需要.

演示代码

$(function() {

  $('button').click(function() {
    $("div.band").randomize("div.member");
  });

});

(function($) {

$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.remove(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
})(jQuery);

HTML

<div class="band">
    <div class="member">
        <ul>
            <li>John</li>
            <li>Lennon</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>Paul</li>
            <li>McCartney</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>George</li>
            <li>Harrison</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>Ringo</li>
            <li>Starr</li>
        </ul>
    </div>
</div>
<button>Randomize</button>

Answer 2

我修改了Russ Cam的解决方案,以便选择器是可选的,并且可以在多个容器元素上调用该函数,同时保留每个随机元素的父元素.

例如,如果我想在每个'.member'div中随机化所有LI,我可以像这样调用它:

$('.member').randomize('li');

我也可以这样做:

$('.member li').randomize();

所以调用它的两种方法如下:

$(parent_selector).randomize(child_selector);

要么

$(child_selector).randomize();

这是修改后的代码:

$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });

    return this;
};

精缩:

$.fn.randomize=function(a){(a?this.find(a):this).parent().each(function(){$(this).children(a).sort(function(){return Math.random()-0.5}).detach().appendTo(this)});return this};

Answer 3

使用sort进行随机化并不总是使元素随机化.最好使用一个shuffle方法,如我可以如何改组数组？

这是我更新的代码

(function($) {
    $.fn.randomize = function(childElem) {
        function shuffle(o) {
            for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
        };
        return this.each(function() {
            var $this = $(this);
            var elems = $this.children(childElem);

            shuffle(elems);

            $this.detach(childElem);  

            for(var i=0; i < elems.length; i++) {
                $this.append(elems[i]);      
            }
        });    
    }
})(jQuery);