Gunnar Bittersmann: Links mit bestimmter Klasse suchen und Linktexte ausgeben

Beitrag lesen

@@limu:

nuqneH

	function breadcrumbfunction() {  
  	for (var i = 0; i < document.getElementsByTagName("a").length; i++) {  
  		if (document.getElementsByTagName("a")[i].className == "isActive") {	  
  			$("#BreadcrumbNavi").append("> " + document.getElementsByTagName("a")[i].innerHTML);  
  		}  
  	}
  
Dazu noch ein paar Anmerkungen:  
  
Es ist nicht gut Elemente oder Elementkollenktionen mehrfach aus dem DOM rauszusuchen, schon gar nicht innerhalb einer Schleife. Man sollte das nur einmal und das Ergebnis in einer Variablen ablegen.  
  
In JavaScript ohne jQuery sähe das dann so aus:  
  
~~~javascript
function breadcrumbfunction()  
{  
  var aElements = document.getElementsByTagName("a"),  
      breadcrumbNavi = document.getElementById("BreadcrumbNavi");  
  
  for (var i = 0; i < aElements.length; i++)  
  {  
    if (aElements[i].className == "isActive")  
    {	  
      breadcrumbNavi.innerHTML += "> " + aElements[i].innerHTML;  
    }  
  }  
}

Aber wie Felix schon sagte, gibt es die Kollektion der Links schon in document.links.

Die Abfrage, ob der Klassenname "isActive" ist, ist auch problematisch. Was, wenn so’n Link mehreren Klassen angehört: "foo isActive bar"?

In modernen Browsern gibt es das [link:https://developer.mozilla.org/en-US/docs/Web/API/element.classList@title=classList]-Objekt mit der contains-Methode:

function breadcrumbfunction()  
{  
  var breadcrumbNavi = document.getElementById("BreadcrumbNavi");  
  
  for (var i = 0; i < document.links.length; i++)  
  {  
    if (document.links[i].classList.contains("isActive"))  
    {	  
      breadcrumbNavi.innerHTML += "> " + document.links[i].innerHTML;  
    }  
  }  
}

Qapla'

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)