使用jQuery随机化div元素序列
我正在尝试使用jQuery完成我的第一步，但是我在理解如何从div父元素中查找一系列子元素时遇到了一些麻烦。我习惯于使用div 2和div 3，所以我可能会搞错一些概念，比如用jQuery随机化ActionScript元素序列的更好方法是什么！
我有一段简单的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>我尝试过这样做，比如在一个数组中映射、.member、、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时，我想获取我的.member div列表的第一个孩子，但事实并非如此。
如果我使用element_parent.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容器呢？
回答 5
Stack Overflow用户
发布于 2009-10-07 20:20:05
$('div.band div.member');将为您提供一个jQuery对象，其中包含与选择器匹配的<div>，即具有member类的div，它是具有band类的div的后代。
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);工作代码：
$('button').click(function() {
$("div.band").randomize("table tr td", "div.member");
});
(function($) {
$.fn.randomize = function(tree, childElem) {
return this.each(function() {
var $this = $(this);
if (tree) $this = $(this).find(tree);
var unsortedElems = $this.children(childElem);
var elems = unsortedElems.clone();
elems.sort(function() {
return (Math.round(Math.random()) - 0.5);
});
for (var i = 0; i < elems.length; i++)
unsortedElems.eq(i).replaceWith(elems[i]);
});
};
})(jQuery);body {
background-color: #000;
font: 16px Helvetica, Arial;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="band">
<table>
<tr>
<td>
<div class="member">
<ul>
<li>John</li>
<li>Lennon</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="member">
<ul>
<li>Paul</li>
<li>McCartney</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="member">
<ul>
<li>George</li>
<li>Harrison</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="member">
<ul>
<li>Ringo</li>
<li>Starr</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<button>Randomize</button>
这是一个。将/edit添加到URL以查看代码。如果您需要任何有关其工作原理的详细信息，请留下评论。它也许可以做得更健壮，以处理某些情况(例如，如果插件指向的jQuery对象有其他子元素)，但它将满足您的需求。
Stack Overflow用户
发布于 2012-08-02 03:43:42
我修改了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};Stack Overflow用户
发布于 2014-08-05 22:08:21
使用排序的随机化并不总是随机化元素。最好使用类似于How can I shuffle an array?中的随机方法
下面是我更新的代码
(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);https://stackoverflow.com/questions/1533910
复制相似问题