Jak pobrac pojedyncze poziomy z zaglebionej listy - jquery

Witam,

Mam taki kod

<ul>
  <li>Water 1</li>
  <li>Water 2</li>
  <li>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>
        <ul>
          <li>Beer</li>
          <li>Vodka</li>
          <li>Coca Cola</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Zamiast nazwy trunkow, mam inputy type='checkbox'. Jak klikne na Tea chce, wybrac Coffe i Tea.

Jezeli klikne np na Coca Cola, chce pobrac Beer i Vodka, Coca Cole.
Na razie mam cos takiego:
this to klikniety checkbox.

var t0= $(this).closest('ul > li:first-child').find('input:checkbox');
var t1= $(this).closest('ul').closest('ul:first > li:first-child').find('input:checkbox');
var t2 = $(this).closest('ul li:not(ul li ul li)').find('input:checkbox');

nic nie smiga ... najbardziej pasuje mi opcja t2. powinna dzialac, ale jednak nie smiga...

#Tak krótki kod wkejaj bezpośrednio na forum, nie na zewnętrzny serwis, gdzie nie wiadomo kiedy wygaśnie i nie ma nawet kolorowania. Po co mamy się przerzucać między dwoma zakładkami, żeby analizować raz treść/kod, a raz HTML?
#Uważaj na literówki, szczególnie w kodzie i rzeczach dotyczących kodu!
#Koloruj KAŻDY fragment kodu, jeżeli jest to krótki fragment to zawarcia w jednej linii - zastosuj backticki (jak jak przy this zrobiłeś)

No i dwa najważniejsze!
#Wklejając kod, podawaj go takim, jakiego go masz. Teraz mówisz, że powycinałeś checkboxy, a po 3 stronach się może okazać, że przy okazji jeszcze jedna istotna rzecz jest inaczej. Tak nie może być.
#Ze względu na uwagę powyżej - sądzę, że któryś z przykładów powinien działać - skoro nie działa, to zamotałeś chyba w innym miejscu, a my o tym nie wiemy, bo mamy jakiś edytowany kod.
#Czytaj dokumentację! Niektóre z Twoich pomysłów (szczególnie t2!) są naprawdę szalone.
#"DOM traversing" będzie dobrym hasłem do Google. Można np. dowiedzieć się o istnieniu siblings w jQuery ;)

http://jsbin.com/xeguhipeva/2/edit <= tutaj

a idziesz po rodzinie bo szukasz dzieci rodzenstwa twojego ojca/matki ;) czyli rodzenstwo stryjeczne/cioteczne ;)

$(this).parent().siblings().find("input").prop('checked', true); od elementu kliknietego do ojca, potem jego rodzenstwo i szukasz inputa na ktorego ustawiasz checked true.

teraz tylko musisz pomyslec co chcesz zrobic dalej, czy odznaczac wszystkie jak kliknie sie jeszcze raz, czy tylko wybrany itp.

@szalonyfacet noo, gdzie? przecież to nie śmiga? np. jak klikasz na Coffee albo Tea zaznaczasz od razu wszystko w dół, wszyściutko. A tak ma nie być. Takie coś to i ja napisałem. Podałem taki sam kod w pierwszym poście. Chodzi o to, że jak klikniesz na np Tea, to masz zaznaczyć tylko ten poziom. Z tego przykładu wychodzi, że jest to drugi poziom, więc po kliknięciu na Tea, powinieneś zaznaczyć Coffee i Tea i nic poza tym. Tak samo wyżej. Klikasz np na Water 1 i wybierasz/zaznaczasz tylko Water 1 i Water 2 i nic poza tym. Ty jednak lecisz po całej liście w dół... blisko, ale to jeszcze nie to. A opcję z siblings() też już używałem, ale i z nią mi nie poszło.

$(this).parent().siblings().find(">input").prop('checked', true);
$(this).parent().siblings().children("input").prop('checked', true);

masz, wybierz sobie

gotowiec, bo przecież czytanie dłuższych postów z poradami, już nie mówiąc o dokumentacji, jest dla frajerów, w poście ma być kod/link do rozwiązania

Przeczytam dokumentacje. Widzę, że muszę, mam braki :/

Kazdej checboksa owinalem w <label> i <div>. I zastanawia mnie dla czego jak dodalem dwa elementy drzewa DOM, nie dziala kod jquery?

$(this).parent().parent().siblings().find(">input").prop('background', 'red');
 

Elementy div i label nie dzialaja na takiej samej zasadzie jak ul li czy input?

bije sie w piersi, bo na szybko pisalem i nie dodalem > ktory wlasnie mowi ze szukaj tylko w danym elemencie,a nie glebiej. i to powoduje blad o ktorym wspominasz teraz. bo jesli input bedzie w innych elementach, w twoim przypadku label i div to juz metoda z > nie zadziala. lepiej jest rozumiec co jest do czego to wtedy bedzie sie wiedziec co powoduje bledy i jak to naprawic. nastepnym razem jak ktos ci podrzuci rozwiazanie to przesledz krok po kroku i zrozum co dokladnie to robi ;)

poniatowski napisał(a):

Kazdej checboksa owinalem w <label> i <div>. I zastanawia mnie dla czego jak dodalem dwa elementy drzewa DOM, nie dziala kod jquery?

$(this).parent().parent().siblings().find(">input").prop('background', 'red');
 

Elementy div i label nie dzialaja na takiej samej zasadzie jak ul li czy input?

Działają.
Ale skoro obiecałeś poczytać dokumentację to zacznij od:

parent, closest, siblings, find, children --- na dobry początek wystarczy

wtedy wszystko będzie jasne

Na pewno nie moge uzyc find, poniewaz find idzie w dol. Probowalem z closest(), ale tez ciezko. nie mam pojecia ...

Probuje z closest(), ale nie idzie :/

http://jsbin.com/riyerufeku/1/edit?html,js,output

przecież closest i find działają w przeciwnych kierunkach... jak ty to czytałeś?

wiem, że closest szuka najbliższego elementu idąc w górę. A find idzie od naszego wybranego elementu w dół. To było tylko dla testów. Szukam najbliższego labela dla wybranego checkboxa i z tego labela idę do najbliższego rodzica czyli 'li'. Po tym wybieram rodzeństowo dla li i nakładam find, który działa jak "filtr". Ale nie mogę się uporać z tym, jak dodam div albo label. Sam kod i funkcje, które podałeś przeczytałem i rozumiem. Możesz mi zarzucić, że nie umiem ich użyć, bo to fakt.

dobra, to teraz wklej nieruszany kod (o czym Ci wspomniałem już na samym początku) i wklej kod, odpowiadający temu opisowi z posta wyżej. spróbujemy Ci wskazać w którym kroku błędnie myślisz ;)

ok, sorry. dałem ciała. banalna sprawa. wystarczyło, przeczytać to co wskazał dzek69 i użyć szarego budyniu nad oczami...

http://jsbin.com/kexakaxupa/1/edit?html,output

5 minut pracy w totalnym skupieniu z konsolą ff

za każdym razem uczę się od nowa. jak mam moment, gdzie nie wiem co otrzymuję powinienem zawsze sięgać do konsoli,

ale tym razem trochę mi się zeszło. w konsoli widać dokładnie krok po kroku ja chodzimy po drzewie DOM.

no i fajno, gratulacje i życzę dalszych sukcesów ;)

:)