kostenloser Webspace werbefrei: lima-city

Childelemente von Element

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fabo

   fabo hat kostenlosen Webspace.

   1:09, 20.7.2011

   Moin,
   
   bin mir grad nicht sicher, ob der Titel passend ist. However... Folgende JQuery-Anweisung nutze ich zZt.:
   
   

   $('.OrderedList').children().each(function(){
   			if($(this).hasClass('item')	)
   			{
   				if($(this).hasClass('active') || $(this).hasClass('idle')	)
   				{
   					$(this).show();
   				}
   				else
   				{
   					$(this).hide();
   				}
   			}
   		})	
   	}

   
   
   Da ich aber nicht auf ein Framework zurückgreifen möchte, suche ich eine frameworklose Alternative. Dürfte nicht all zu schwer sein, aber ich hab trotzdem gerade einen Hänger :D

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. t*****b

   9:49, 20.7.2011

   Da du mit JS nicht (bzw. nicht über Umwege) auf Klassen zugreifen kannst, solltest du deiner OrderedList erst einmal ne ID geben, zB #OrderedList. Dann kannst du auf Element zugreifen:
   
   

   elem = document.getElementById("OrderedList");

   
   
   Dann kannst du alle childNodes durchgehen:
   
   

   for(var i = 0; i < elem.childNodes.length; i++) {
    if(elem.childNode[i].className == "active") {
     elem.childNode[i].className = "idle")
    } else {
     elem.childNode[i].className = "active";
    }
   }

   
   
   Habs jetzt nicht getestet, müsste aber so funktionieren.
   
   /Edit: Syntaxfehler
   
   Beitrag zuletzt geändert: 20.7.2011 9:50:08 von trueweb
4. Autor dieses Themas

   fabo

   fabo hat kostenlosen Webspace.

   16:41, 20.7.2011

   Hi,
   
   also mit JS auf Klassen zuzugreifen, ist eigentlich kein Problem. Dafür gibts ja getElementsByClassName.
   
   Hier eine Beispielliste:
   
   

   <ul class="OrderedList">
   	<li class="item"><a rel="ignore"><img class="pic" src="48978_100000436332925_1813_q.jpg"><span class="name">ABC</span></a></li>
   	<li class="item active"><a rel="ignore"><img class="pic" src="203184_1753825491_4023607_q.jpg"><span class="name">XYZ</span></a></li>
   	<li class="item"><a rel="ignore"><img class="pic" src="161675_100000543136122_7402791_q.jpg"><span class="name">123</span></a></li>
   </ul>

   
   
   So hatte ich es probiert:
   
   

   var OrderedList = document.getElementsByClassName('OrderedList'),
   	i = 0;
   				
   for(i; i < OrderedList.childNodes.length; i++) {
   	if(OrderedList.childNode[i].className !== 'active' || OrderedList.childNode[i].className !== 'idle') {
   		OrderedList.childNode[i].style.display = 'block';
   	} else {
   		OrderedList.childNode[i].style.display = 'hidden';
   	}
   }

   
   
   Funktioniert aber leider nicht
   
   Beitrag zuletzt geändert: 20.7.2011 16:42:59 von fabo

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?