随机化与jQuery DIV元素的序列(Randomize a sequence of div el

我试图做我与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>

我曾尝试一些方法来做到这一点像地图。成员的div在一个阵列，然后更改排序顺序，但没有成功。

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]我想获得的div我。成员列表的第一个孩子，但事实并非如此。

如果我有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>

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

请帮忙
谢谢
维托里奥

---

编辑：

感谢您的牢度和这个不同的方式来获得所选择的孩子，我要记下这些方式，共创未来！
我试过这个方法，但似乎我无法让整个DIV（请tell'me如果我没弄错的东西，它可能是太可能的！）。

我768,16得到这个内容：

<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>
*/

那么，有没有办法让。成员的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查看代码。 如果您需要了解它是如何工作的任何细节，请发表评论。 它可能可以做正在做更多的能力去处理某些情况下（例如，如果有jQuery的其他孩子elems的对象插件chianed到），但它会满足您的需求。

从演示代码

$(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:

我修改拉斯凸轮的溶液中，使得选择器是可选的，并且函数可以被称为在多个容器中的元素，同时保持每个随机化元素的父。

例如，如果我想随机“成员” DIV内的每一个LIS的所有，我可以这样称呼它：

$('.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:

使用随机排序并不总是随机的元素。 这是更好地使用像从一个洗牌方法我怎样才能洗牌数组？

这里是我更新的代码

(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);

文章来源: Randomize a sequence of div elements with jQuery