[JavaScript]Dodanie nowego li Opcje

[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 (IMG:style_emoticons/default/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 
$(document).ready(function() {
			var ul = document.getElementById("cat_items");
			var liNodes = [];			
			for (var i = 0; i < ul.childNodes.length; i++) {
				if (ul.childNodes[i].nodeName == "LI") {
					liNodes.push(ul.childNodes[i]);
				}
			}
			var numNodes =liNodes.length % 4;
});
[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? (IMG:style_emoticons/default/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

(IMG:style_emoticons/default/wink.gif) HTH

[mjanisz]

nie zrozumielismy sie... to ja sie nie jasno wyrazilem (IMG:style_emoticons/default/tongue.gif)

jest jedna lista ul i chcę wstawić nowe li np. po trzecim elemencie elemencie listy - tak będzie jaśniej (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/smile.gif)

[JAVASCRIPT] pobierz, plaintext 
                        var start = 0;
			$("ul#cat_items li").children().each(function() {
				if(start == 3) {
					$(this).append("To ten element!");
				}
				start++;
				});
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował mjanisz 28.06.2011, 19:29:29

[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 
// najpierw warunek na sprawdzenie czy lista ma w ogóle 5 elementów
if(ul.getElementsByTagName('li').length <= 5) ul.appendChild(li);
else ul.insertBefore(li , ul.getElementsByTagName('li')[4]);
[JAVASCRIPT] pobierz, plaintext 

O to chodziło? (IMG:style_emoticons/default/smile.gif)

[mjanisz]

wspaniale! o to chodzilo (IMG:style_emoticons/default/smile.gif)

ps. z ciekawości czystej - jak wstawić tak noda przy pomocy jquery?

[Sephirus]

Z czystej miłej chęci - nie wiem (IMG:style_emoticons/default/wink.gif) Nie używam ;P

[erix]

[JAVASCRIPT] pobierz, plaintext 
$('#lista li').eq(2).after($('<li class="asd">bleble</li>'));
[JAVASCRIPT] pobierz, plaintext 

Pisane z palca, ale powinno działać. [;