用jQuery随机化一系列div元素
我试图用jQuery做我的第一步，但我有一些麻烦，以了解如何从div父元素find子元素的列表。 我习惯使用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一样的方法，然后改变sorting顺序，但没有成功。
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>
我相信这应该很容易，但我不知道如何:(
请帮忙
谢谢
维托里奥
编辑：
感谢您的坚定和各种方式让选定的孩子，我会记下这些未来的方式！
我尝试了这种方法，但似乎我无法得到整个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容器？
$('div.band div.member');
会给你一个包含<div>匹配select器的jQuery对象，也就是div类member ，div类是div类的后代。
jQuery对象是一个类似数组的对象，因为每个匹配的元素都被赋予了一个数字属性（像索引一样）并定义了一个length属性。 得到一个元素是
// first element $('div.band div.member')[0];
要么
// first element $('div.band div.member').get(0);
您可以指定根据DOM中的位置select特定元素，而不是select所有元素。 例如
// 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对象插件是捏），但它会满足您的需求。
代码来自演示
$(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>
我修改了Russ Cam的解决scheme，以便select器是可选的，并且可以在多个容器元素上调用该函数，同时保留每个随机元素的父项。
例如，如果我想随机化每个“.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};
使用sorting的随机化并不总是随机化元素。 如何使用洗牌方法比如何洗牌数组更好？
这是我更新的代码
(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);
