我正在尝试使用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>
我尝试过一些方法,比如在一个数组中映射 .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 [0] 时,我想要获得 .member 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(请告诉我,如果我弄错了,那可能太多了!)。
我得到这个内容:
<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容器?
答案 0 :(得分:94)
$('div.band div.member');
将为您提供一个包含<div>
的jQuery对象,该对象与选择器匹配,即div与类member
,它们是具有类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);
这是 Working Demo 。将 / edit 添加到网址以查看代码。如果您需要有关其工作原理的任何详细信息,请发表评论。它可能会因为处理某些情况而变得更强大(例如,如果插件是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>
答案 1 :(得分:24)
我修改了Russ Cam的解决方案,以便选择器是可选的,并且可以在多个容器元素上调用该函数,同时保留每个随机元素的父元素。
例如,如果我想在每个'.member'div中随机化所有LI,我可以这样称呼它:
$('.member').randomize('li');
我也可以这样做:
$('.member li').randomize();
所以调用它的两种方法如下:
$(parent_selector).randomize(child_selector);
OR
$(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};
答案 2 :(得分:5)
使用sort进行随机化并不总是使元素随机化。最好使用像How can I shuffle an array?
那样的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);
答案 3 :(得分:1)
以防万一不用jquery就可以这样做:
/** @param {HTMLElement} parent */
const shuffleChildren = (parent) => {
const cards = [...parent.children];
for (const child of cards) {
const newPlace = Math.floor(Math.random() * cards.length);
parent.insertBefore(child, cards[newPlace + 1] || null);
}
};
(与jquery无关的答案已被关闭,因为它与此重复,因此在此处发布)
答案 4 :(得分:0)
此解决方案的灵感来自现有解决方案,但使用 Fisher-Yates algorithm 进行排序。
这确保元素被公平地随机化,这对于许多用例来说很重要。
$.fn.randomizeChildrenOrder = function() {
this.each(function(){
let childrenArray = $(this).children().toArray();
let shuffledChildrenArray = fisherYatesShuffle(childrenArray);
$(shuffledChildrenArray).detach().appendTo(this);
});
return this;
// https://stackoverflow.com/a/2450976/665825
function fisherYatesShuffle(array){
let currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
}
用法:在需要shuffle的元素的parent元素上调用函数。如果元素与需要单独放置的元素共享父元素,请在它们周围添加一个额外的父元素,因此不再是这种情况。
$('.member ul').randomizeChildrenOrder();
广义:
$(parentSelector).randomizeChildrenOrder();