Randomize eine Sequenz von div-Elementen mit jQuery

Question

Ich versuche, meine ersten Schritte mit jQuery zu tun, aber ich habe einige Schwierigkeiten zu verstehen, wie Sie eine Liste der untergeordneten Elemente von einem div Elternelement finden. Ich bin es gewohnt, mit ActionScript 2 und ActionScript 3 zu arbeiten, damit ich ein Konzept verwechseln kann, wie zum Beispiel die beste Möglichkeit, eine Folge von div-Elementen mit jQuery zu randomisieren!

Ich habe diesen einfachen Teil des 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> 

Ich habe einige Art und Weise, wie Karte .member divs in einem Array zu tun versucht, und dann die Sortierreihenfolge zu ändern, aber ohne Erfolg.

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")); 

wenn ich element_parent aufmerksam zu machen versucht [0] ich dachte, das erste Kind meiner .member Liste von divs zu bekommen, aber es ist nicht.

wenn ich eine Benachrichtigung mit element_parent machen [0] .innerHTML ich sehe, dass:

<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> 

Warum? Wie kann ich genau eines der Mitglieder so bekommen?

<div class="member"> 
    <ul> 
     <li>Paul</li> 
     <li>McCartney</li> 
    </ul> 
</div> 

Ich bin sicher, das sollte einfach sein, aber ich weiß einfach nicht, wie :(

bitte helfen
dank
vittorio

---

EDIT:

Danke für die Echtheit und diese verschiedenen Möglichkeiten, um das ausgewählte zu bekommen Kinder, ich werde mir diese Wege für die Zukunft notieren!
Ich habe diese Methode versucht, aber es scheint, ich konnte nicht die gesamte div (bitte sagen Sie mir, wenn ich etwas falsch, es könnte zu viel möglich sein !!).

ich diesen Inhalt erhalten shoud:

<div class="member"> 
    <ul> 
     <li>Ringo</li> 
     <li>Starr</li> 
    </ul> 
</div> 

aber mit einer dieser Methoden wie $ ("div.band div.member: eq (2)") oder die anderen nützlichen Möglichkeiten, ich dies:

alert ($('div.band div.member')[0]); 
/* result 
<ul> 
    <li>Ringo</li> 
    <li>Starr</li> 
</ul> 
*/ 

so ist es eine Möglichkeit, die .member div Container auch in meinem Knoten zu bekommen?

Answer 1

$('div.band div.member'); 

wird Ihnen ein jQuery-Objekt <div> enthält, die die Wähler das heißt div mit Klasse member übereinstimmen, die Abkömmlinge eines div mit der Klasse sind band.

Das jQuery-Objekt ist ein Array-artiges Objekt, in dem jedem übereinstimmenden Element eine numerische Eigenschaft (denke wie ein Index) des Objekts zugewiesen und eine length-Eigenschaft definiert ist.Um ein Element zu erhalten, ist

// first element 
$('div.band div.member')[0]; 

oder

// first element 
$('div.band div.member').get(0); 

Statt alle Elemente ausgewählt haben, können Sie angeben, ein bestimmtes Element wählen nach Position im DOM. Zum Beispiel

// get the first div with class member element 
$("div.band div.member:eq(0)") 

oder

// get the first div with class member element 
$("div.band div.member:nth-child(1)") 

EDIT:

Hier ist ein Plugin Ich klopfte nur

aus

(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); 

Hier ist ein Working Demo. Fügen Sie /bearbeiten der URL hinzu, um den Code zu sehen. Wenn Sie Details darüber benötigen, wie es funktioniert, hinterlassen Sie bitte einen Kommentar. Es könnte wahrscheinlich mit robusteren Umgang mit bestimmten Situationen (wie wenn es andere Kind Elemente des jQuery-Objekts, auf das das Plugin abgestimmt ist) gemacht werden, aber es wird Ihren Bedürfnissen entsprechen.

-Code aus der Demo

$(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> 

Answer 2

modifizierte I Russ Cam-Lösung, so dass die Wähler optional ist, und die Funktion kann auf mehrere Container-Elemente genannt werden, unter Beibehaltung jeder randomisierten Elternelement.

Zum Beispiel, wenn ich alle LIs innerhalb jeder randomize will '.member' div, kann ich es so nennen:

$('.member').randomize('li'); 

ich es auch so machen könnte:

$('.member li').randomize(); 

---

so sind die zwei Möglichkeiten, dies zu nennen wie folgt:

$(parent_selector).randomize(child_selector); 

OR

$(child_selector).randomize(); 

---

Hier ist der modifizierte Code:

$.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; 
}; 

minimierte:

$.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}; 

Answer 3

Randomisierung Art mit Randomisierung nicht immer die Elemente. Es ist besser, ein Shuffle-Verfahren wie das verwenden, um von How can I shuffle an array?

Hier ist meine aktualisierte Code

(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);