Рандомизация последовательности элементов 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 контейнер тоже в моем узле?

599   3  

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

    Ничего не найдено.