- 首页
- 前端开发
- 使用 jQuery 随机化一系列 div 元素
使用 jQuery 随机化一系列 div 元素
[英] Randomize a sequence of div elements with jQuery
本文介绍了使用 jQuery 随机化一系列 div 元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 jQuery 完成我的第一步，但是我在理解如何从 div 父元素中查找子元素列表时遇到了一些麻烦.我习惯于使用 ActionScript 2 和 ActionScript 3，所以我可能会弄错一些概念，比如使用 jQuery 随机化一系列 div 元素的更好方法是什么！
我有这个简单的 HTML 代码部分:
<div class="member"><ul><li>约翰</li><li>列侬</li>
<div class="member"><ul><li>保罗</li><li>McCartney</li>
<div class="member"><ul><li>乔治</li><li>哈里森</li>
<div class="member"><ul><li>林戈</li><li>斯塔尔</li>
我尝试了某种方法来做到这一点，例如在一个数组中映射 .member div，然后更改排序顺序但没有成功.
function setArrayElements (element_parent) {var arr = [];//警报(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 发出警报，我会看到:
<ul><li>约翰</li><li>列侬</li>
<div class="member"><ul><li>保罗</li><li>McCartney</li>
<div class="member"><ul><li>乔治</li><li>哈里森</li>
<div class="member"><ul><li>林戈</li><li>斯塔尔</li>
为什么?我怎样才能得到这样的成员之一?
<ul><li>保罗</li><li>McCartney</li>
我相信这应该很容易，但我只是不知道如何:(
请帮忙
谢谢
维托里奥
<小时>感谢您的坚守和各种获取被选中孩子的方式，这些方式我以后会注意的！
我尝试过这种方法，但似乎无法获取整个 div(如果我弄错了请告诉我，这可能太多了！！).
我应该得到这个内容:
<ul><li>林戈</li><li>斯塔尔</li>
但是使用其中一种方法，例如 $("div.band div.member:eq(2)") 或其他有用的方法，我明白了:
alert ($('div.band div.member')[0]);/* 结果<ul><li>林戈</li><li>斯塔尔</li>*/
那么有没有办法在我的节点中也获得 .member div 容器?
解决方案
$('div.band div.member');
会给你一个包含
的 jQuery 对象，该对象与选择器相匹配，即具有
member 类的 div，它是类
band<的 div 的后代/代码>.jQuery 对象是一个类似数组的对象，因为每个匹配的元素都被分配了一个对象的数字属性(就像一个索引)，并且还定义了一个 length 属性.获取一个元素是
//第一个元素$('div.band div.member')[0];
或
//第一个元素$('div.band div.member').get(0);
您可以指定根据 DOM 中的位置选择特定元素，而不是选择所有元素.例如
//获取第一个带有类成员元素的div$("div.band div.member:eq(0)")
或
//获取第一个带有类成员元素的div$("div.band div.member:nth-child(1)")
这是我刚刚淘汰的插件
(function($) {$.fn.randomize = 函数(childElem){返回 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");});(功能($){$.fn.randomize = 函数(树，childElem){返回 this.each(function() {var $this = $(this);if (tree) $this = $(this).find(tree);var unsortedElems = $this.children(childElem);var elems = unsortedElems.clone();elems.sort(function() {返回 (Math.round(Math.random()) - 0.5);});for (var i = 0; i < elems.length; i++)unsortedElems.eq(i).replaceWith(elems[i]);});};})(jQuery);
body {背景色:#000；字体:16px Helvetica、Arial；颜色:#fff;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="band"><表格><tr><td><div class="member"><ul><li>约翰</li><li>列侬</li>
</td></tr><tr><td><div class="member"><ul><li>保罗</li><li>McCartney</li>
</td></tr><tr><td><div class="member"><ul><li>乔治</li><li>哈里森</li>
</td></tr><tr><td><div class="member"><ul><li>林戈</li><li>斯塔尔</li>
</td></tr>
<button>随机化</button>
这是一个可编辑的工作演示.将 /edit 添加到 URL 以查看代码.如果您需要有关其工作原理的任何详细信息，请发表评论.它可能会变得更健壮以处理某些情况(例如，如果插件连接到 jQuery 对象的其他子元素)，但它会满足您的需求.
I'm trying to do my frist steps with jQuery but I have some trouble to understand how to find a list of child elements from a div parent element. I'm used to work with ActionScript 2 and ActionScript 3 so i could mistake some concept, like what is the better way to randomize a sequence of div elements with jQuery!
I have this simple portion of HTML code:
<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>
I have attempted some way to do that like map .member divs in one array and then changing the sort order but without success.
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"));
when i attempted to alert element_parent[0] i thought to get the first child of my .member list of divs but it isn't.
if i make an alert with element_parent[0].innerHTML i see that:
<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>
Why?
How can I do to get exactly one of the members like this?
<div class="member">
<ul>
<li>Paul</li>
<li>McCartney</li>
</ul>
</div>
I'm sure this should be easy but I just don't know how
:(
please help
thanks
vittorio
EDIT:
Thanks for the fastness and this various ways to get the selected children, I'll take a note of these ways for the future!
I tried this methods, but it seems I couldn't get the entire div (please tell'me if i mistake something, it' could be too much possible!!).
I shoud get this content:
<div class="member">
<ul>
<li>Ringo</li>
<li>Starr</li>
</ul>
</div>
but with one of this methods like $("div.band div.member:eq(2)") or the other useful ways, I get this:
alert ($('div.band div.member')[0]);
/* result
<ul>
<li>Ringo</li>
<li>Starr</li>
</ul>
*/
so is there a way to get the .member div container too in my node?
解决方案
$('div.band div.member');
will give you a jQuery object containing <div> that match the selector i.e. div with class member that are descendents of a div with class band.
The jQuery object is an array-like object in that each matched element is assigned a numerical property (think like an index) of the object and a length property is also defined. To get one element is
// first element
$('div.band div.member')[0];
or
// first element
$('div.band div.member').get(0);
Instead of selecting all elements, you can specify to select a specific element according to position in the DOM. For example
// get the first div with class member element
$("div.band div.member:eq(0)")
or
// get the first div with class member element
$("div.band div.member:nth-child(1)")
EDIT:
Here's a plugin I just knocked out
(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 Code:
$('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>
Here's an Editable Working Demo. add /edit to the URL to see the code. If you need any details about how it works, please leave a comment. It could probably do with being made more robust to handle certain situations (like if there are other child elems of the jQuery object the plugin is chianed to) but it'll suit your needs.
这篇关于使用 jQuery 随机化一系列 div 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
