2009-10-07 22 views
51

Próbuję wykonać moje pierwsze kroki z jQuery, ale mam problem ze zrozumieniem, jak znaleźć listę elementów potomnych z elementu div div. Jestem przyzwyczajony do pracy z ActionScript 2 i ActionScript 3, więc mogłem pomylić jakąś koncepcję, jak na przykład lepszy sposób losowania sekwencji elementów div za pomocą jQuery!Losowa sekwencja elementów div za pomocą jQuery

Mam ten prosty fragment kodu 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> 

próbowałem jakiś sposób, aby to zrobić jak mapie .member DIV w jednej tablicy, a następnie zmieniając kolejność sortowania, ale bez powodzenia.

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

kiedy próbował ostrzec element_parent [0] myślałem, aby uzyskać pierwsze dziecko mojego .member listy div, ale tak nie jest.

Jeśli zrobię alert z element_parent [0] .innerHTML widzę, że:

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

Dlaczego? Jak mogę zrobić, aby uzyskać dokładnie jednego z członków w ten sposób?

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

Jestem pewien, że to powinno być łatwe, ale ja po prostu nie wiem jak :(

pomóż
dzięki
Vittorio


EDIT:

Dziękujemy za szybkość i różne sposoby zdobycia wybranego dzieci, wezmę pod uwagę te sposoby na przyszłość!
Próbowałem tej metody, ale wydaje się, że nie mogłem uzyskać całego div (proszę powiedzieć, jeśli coś pomylę, to może być zbyt wiele !!).

Powinni dostać tę zawartość:

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

ale z jednym z tych metod, takich jak $ ("div.band div.member: eq (2)") lub inne użyteczne sposoby, mam to:

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

więc czy jest jakiś sposób, aby uzyskać pojemnik .member div zbyt w moim węzła?

+0

dostaniesz div kontenera też.Jeśli używasz Firebug i 'console.log', elementem wyjściowym jest pierwszy element div z elementem klasy –

+0

ah! dzięki, teraz wiem, że nie byłam taka zła! pa pa, – vitto

Odpowiedz

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

daje obiekt jQuery zawierający <div> które odpowiadają selektor czyli div z klasą member że są potomkami div z klasą band.

Obiekt jQuery jest obiektem podobnym do tablicy, w którym każdemu dopasowanemu elementowi przypisano właściwość liczbową (myślę, że jest indeksem) obiektu i zdefiniowano również właściwość length.Aby dostać jeden element jest

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

lub

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

Zamiast wybierać wszystkie elementy, można określić, aby wybrać konkretny element według pozycji w DOM. Na przykład

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

lub

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

EDIT:

Oto plugin właśnie znokautowany

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

Oto Working Demo. dodaj /edit do adresu URL, aby zobaczyć kod. Jeśli potrzebujesz szczegółowych informacji o tym, jak to działa, zostaw komentarz. Prawdopodobnie może to być zrobione z większą odpornością na obsługę pewnych sytuacji (np. Jeśli istnieją inne elementy podrzędne obiektu jQuery, do których wtyczka jest przypisana), ale będzie to odpowiadało twoim potrzebom.

Kod z 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> 
+0

ten przykład jest świetny! Nie widziałem tego trybu składni jquery, ale spróbuję! bardzo przydatny, aby zobaczyć, jak mogę to zrobić! jeszcze raz dziękuję – vitto

+9

+1 za wybicie wtyczki jquery :) –

+0

Zrobiłem sobie prawo do zrobienia [zmodyfikowanej wersji twojego demo] (http://jsbin.com/oyaxa/20/edit) (mam nie mam pojęcia, jakie są wszystkie te 19 edycji). Mam nadzieję, że działa to lepiej w większej liczbie sytuacji. Z pewnością zrobił to w moim przypadku. – cregox

21

I zmodyfikowane rozwiązanie Russ Cam, tak że przełącznik jest opcjonalny, a funkcja może być wywołana na wielu elementów kontenerowych, zachowując każdy randomizacji rodzic elementu.

Na przykład, jeśli chciałem losowo wszystkie Lis obrębie każdego '.member' dział, mogę nazwać tak:

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

Mogę też zrobić to w ten sposób:

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

tak więc dwa sposoby, aby zadzwonić tego są następujące:

$(parent_selector).randomize(child_selector); 

LUB

$(child_selector).randomize(); 

Oto zmodyfikowany kod:

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

minified:

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

Próbowałem użyć tego, ale dostaję błąd: 'Uncaught TypeError: Object [object] Obiekt] nie ma metody 'randomize' ' – jlg

+0

@jlg, musisz wywołać ją na obiekcie JQuery, w następujący sposób:' $ (selector) .randomize (optional_selector) '. Nie możesz wywołać tego na własną rękę, tak: '$ .randomize (selector)' – gruppler

+0

lol ok, nie jestem dobry w jquery! Dziękuję :) – jlg

4

randomizacji za pomocą rodzaju nie zawsze losowe elementy. Lepiej jest stosować metodę losowego jak jeden z How can I shuffle an array?

Oto mój zaktualizowany kod

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

Próbowałem zaakceptowanego rozwiązania, ale losowość nie była wystarczająco dobra w mojej opinii –

Powiązane problemy