Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Dodanie nowego li
Forum PHP.pl > Forum > Przedszkole
mjanisz
Witam,

Mam problem z raczej dość prostym skryptem -> mamy liste <ul> w środku kilkanaście elementów li. lista wystylowana na wygląd zakładake ale mniejsza o to smile.gif
Przypuśćmy, że mamy 4 elementy w rzędzie i 10 elementów listy. Ustawią się w następujący sposób (x to w przykładzie jeden element)

X X X X
X X X X
X X

chcę zrobić aby było to ustawione o tak:

X X
X X X X
X X X X

Wyliczam modulo 4 z elementów listy i widać po ilu elementach będę musiał wstawić odpowiednio wystylowany element listy, aby wyrównał pierwszy rząd. I tutaj jest problem. Wrzucam to co zrobiłem, ma ktoś jakiś pomysł jak wstawić w odpowiednim miejscu childnode dla ul?

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. var ul = document.getElementById("cat_items");
  3. var liNodes = [];
  4. for (var i = 0; i < ul.childNodes.length; i++) {
  5. if (ul.childNodes[i].nodeName == "LI") {
  6. liNodes.push(ul.childNodes[i]);
  7. }
  8. }
  9. var numNodes =liNodes.length % 4;
  10. });
[JAVASCRIPT] pobierz, plaintext


pozdrawiam!
erix
Po co się babrasz z czystym JS-em mając załadowanego frameworka?

Chwila szukania: http://trevordavis.net/blog/reversed-ordered-list-jquery
mjanisz
tak tylko tu chodzi o odwrócenie listy tylko dodanie po określonym elemencie np 2,3 nowego noda
erix
To nie możesz licznika zaimplementować w pętli? tongue.gif
Sephirus
Nie do końca rozumiem problem ale nie możesz po prostu używać insertBefore? Dajesz tablice od tyłu w pętli i zarówno kolejne UL jak i LI dodajesz na zasadzie insertBefore.

Dzięki temu orzymasz


X X X X
X X X X
X X

od końca czyli

X X
X X X X
X X X X

wink.gif HTH
mjanisz
nie zrozumielismy sie... to ja sie nie jasno wyrazilem tongue.gif

jest jedna lista ul i chcę wstawić nowe li np. po trzecim elemencie elemencie listy - tak będzie jaśniej smile.gif
czyli np
mamy :
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

a chce otrzymać
<ul>
<li></li>
<li></li>
<li class="nowe-li"></li>
<li></li>
<li></li>
</ul>
-------------------------
edit: ok już przelatuje po liście tylko jak dodać nowy element "li" za wybranym elementem smile.gif
[JAVASCRIPT] pobierz, plaintext
  1. var start = 0;
  2. $("ul#cat_items li").children().each(function() {
  3. if(start == 3) {
  4. $(this).append("To ten element!");
  5. }
  6. start++;
  7. });
[JAVASCRIPT] pobierz, plaintext
Sephirus
Hmm ok - ja nie praktykuje żadnych spowalniaczy (czytaj frameworków) ale zrobiłbym to tak:

Chcemy wrzucić nowe LI za elementem powiedzmy 5-tym. (czyli index = 4)
zakładam że referencje do UL mam w zmiennej "ul" a nowe LI w zmiennej "li",

[JAVASCRIPT] pobierz, plaintext
  1. // najpierw warunek na sprawdzenie czy lista ma w ogóle 5 elementów
  2. if(ul.getElementsByTagName('li').length <= 5) ul.appendChild(li);
  3. else ul.insertBefore(li , ul.getElementsByTagName('li')[4]);
[JAVASCRIPT] pobierz, plaintext


O to chodziło? smile.gif
mjanisz
wspaniale! o to chodzilo smile.gif

ps. z ciekawości czystej - jak wstawić tak noda przy pomocy jquery?
Sephirus
Z czystej miłej chęci - nie wiem wink.gif Nie używam ;P
erix
[JAVASCRIPT] pobierz, plaintext
  1. $('#lista li').eq(2).after($('<li class="asd">bleble</li>'));
[JAVASCRIPT] pobierz, plaintext

Pisane z palca, ale powinno działać. [;
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.