Рандомизация последовательности элементов div с помощью jQuery
Я пытаюсь сделать мои первые шаги с jQuery, но у меня есть некоторые проблемы, чтобы понять, как найти список дочерних элементов родительского элемента div. Я привык работать с ActionScript 2 и ActionScript 3, поэтому я мог бы ошибиться в какой-то концепции, например, какой лучший способ рандомизировать последовательность элементов div с помощью 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>
Я попытался каким-то образом сделать это, как map .член ДИВС в одном массив, а затем изменение порядка сортировки, но без успеха.
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] я думал получить первого ребенка моего .член список дивов, но это не так.
если я сделаю оповещение с 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>
Я уверен, что это должно быть легко, но я просто не знаю, как
: (
пожалуйста, помогите
спасибо
Витторио
EDIT:
Спасибо за быстроту и это различные способы, чтобы получить выбранных детей, я возьму на заметку этих способов на будущее!
Я пробовал эти методы, но, похоже, я не мог получить весь div (пожалуйста, скажите мне, если я что-то ошибаюсь, это может быть слишком возможно!!).
Я должен получить это содержание:
<div class="member">
<ul>
<li>Ringo</li>
<li>Starr</li>
</ul>
</div>
но с одним из это такие методы, как $("div.группа див.участник: eq (2)") или другими полезными способами, я получаю это:
alert ($('div.band div.member')[0]);
/* result
<ul>
<li>Ringo</li>
<li>Starr</li>
</ul>
*/
так есть ли способ, чтобы получить .член div контейнер тоже в моем узле?
3 ответов:
$('div.band div.member');даст вам объект jQuery, содержащий
<div>, которые соответствуют селектор, т. е. div с классомmember, которые являются потомками элемента div с классомband.объект 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)")EDIT:
вот плагин, который я только что выбил
(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);здесь Рабочая Демо. добавить / edit к 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 так, что селектор является необязательным, и функция может быть вызвана на нескольких элементах контейнера, сохраняя при этом родительский элемент каждого рандомизированного элемента.
например, если бы я хотел рандомизировать все LIs внутри каждого '.членов div, я мог бы назвать его так:
$('.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};
рандомизация с помощью сортировки не всегда рандомизирует элементы. Лучше использовать метод перетасовки, как один из Как я могу перетасовать массив?
вот мой обновленный код
(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);
Comments