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

我正在尝试使用jQuery执行我的第一步，但在理解如何从div父元素中查找子元素列表时遇到了一些困难。我习惯于使用ActionScript2和ActionScript3，所以我可能会误解一些概念，比如用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>

约翰
列侬


保罗
麦卡特尼


乔治
哈里森


林戈
斯塔尔

我尝试了一些方法，比如在一个数组中映射.memberdivs，然后更改排序顺序，但没有成功

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

函数集合数组元素（元素\u父元素）{
var-arr=[]；
//警报（元素\父元素[0]。innerHTML）；
for（var i=0；i

当我试图提醒元素\u父[0]时，我想得到我的.memberdiv列表的第一个子元素，但事实并非如此

如果我使用元素\u父[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（请告诉我如果我弄错了什么，它可能太可能了！！）

我应该得到以下内容：

<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.band div.member'）[0]）；
/*结果

林戈
斯塔尔

*/

那么，有没有办法在我的节点中也获取.memberdiv容器呢

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

将为您提供一个jQuery对象，其中包含与选择器相匹配的

，即div与class

成员相匹配，后者是class
band
的div的后代

jQuery对象是一个类似数组的对象，因为每个匹配的元素都被分配了一个对象的数值属性（就像索引一样），并且还定义了
length
属性

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

或

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

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

或

编辑：

这是一个我刚刚删除的插件

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



约翰
列侬


保罗
麦卡特尼


乔治
哈里森


林戈
斯塔尔

随机化
将为您提供一个jQuery对象，其中包含与选择器相匹配的
，即div与class
成员相匹配，后者是class
band
的div的后代

jQuery对象是一个类似数组的对象，因为每个匹配的元素都被分配了一个对象的数值属性（就像索引一样），并且还定义了
length
属性

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

或

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

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

或

编辑：

这是一个我刚刚删除的插件

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



约翰
列侬


保罗
麦卡特尼


乔治
哈里森


林戈
斯塔尔

随机化
我修改了Russ-Cam的解决方案，因此选择器是可选的，可以在多个容器元素上调用该函数，同时保留每个随机化元素的父元素

例如，如果我想随机化每个“.member”div中的所有LIs，我可以这样称呼它：

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

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

我也可以这样做：

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

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


因此，有两种方法称之为：

$(parent_selector).randomize(child_selector);

或


以下是修改后的代码：

$.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};

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

例如，如果我想随机化每个“.member”div中的所有LIs，我可以这样称呼它：

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

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

我也可以这样做：

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

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


因此，有两种方法称之为：

$(parent_selector).randomize(child_selector);

或


以下是修改后的代码：<