[jQuery] Klasse nach Tag-Name zuordnen

Mott · 11.02.2012

Ich bin gerade dabei, sowas wie einen Blog zu machen. Dabei möchte ich mit jQuery automatisch den Inhalt eines Posts erkennen und dem dann die jeweilige Klasse zuweisen. (also einem Bild "picbox", einem Video "vidbox", usw.)

Mit dem folgenden Code wird aber jedem automatisch "textbox" zugewiesen. Wenn ich das selbe mit einer if-funktion versuche, bekommen alle "picbox".

$("#wrapper div").each(function(){

var content = $(this).children.tagName;
switch (content){
case "img":
$(this).addClass("picbox");
case "video":
$(this).addClass("vidbox");
case "a":
$(this).addClass("linkbox");
default:
$(this).addClass("textbox");
};

});

Wo liegt mein Fehler?

Duddle · 11.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Ein switch-case in JavaScript "fällt durch", d.h. du musst explizit anweisen, ab wann er aus dem Konstrukt rausgehen soll, sonst führt er die folgenden Fälle auch aus. Konkret heißt das:

Code:

switch(foo) {
  case 1:
    bar();
    [B]break;[/B]
  case 2:
    baz();
    [B]break;[/B]
  default:
    //bla
}

Duddle

Mott · 11.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Danke, das wusste ich schon mal nicht.
Leider ändert das immer noch nichts an meinem Problem, es wird noch jedem das default zugewiesen. Könnte es vielleicht am Sellektor liegen?

Duddle · 11.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Lass dir content ausgeben, bevor du in den switch gehst. Dann siehst du, was drinsteht und warum er wie reagiert. Hilfreich ist auch immer Firebug zum Auffinden der Fehler.

Abgesehen davon ist children eine Funktion, kein Attribut. Wenn du

Code:

$(this).children.tagName;

schreibst, greifst du auf die Funktion children des jQuery-Objektes $(this) zu. Die Funktion children selbst hat aber kein Attribut tagName.

Wenn du dagegen

Code:

$(this).children().tagName;

schreibst, führst du die Funktion children aus und greifst auf das Attribut tagName des Rückgabewertes zu. children() wiederum gibt ein jQuery-Objekt zurück, aber das hat auch kein Attribut / keine Funktion namens tagName.

Du musst daher auf den Knoten im Objekt selbst zugreifen. Das kannst du z.B. mit get() machen:

Code:

$(this).children().get(0).tagName;

Duddle

Mott · 11.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Im alten code war content immer undefined.

das mit .get(0) hört sich logisch an, nun wird aber gar keine klasse mehr zugewiesen...

wenn ich nur $(this).children().get(0); schreibe, gibt er mir aber öfters ein Image oder Div element aus.

Duddle · 11.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Falls du Firefox nutzt, installier dir . Jetzt. Sofort.

Das hat eine Konsole, die sehr klar aufgetretene Fehler anzeigt. Weiterhin kannst du damit jedes Element genau untersuchen. Noch schöner ist ein kleiner Bereich, in dem du Befehle ausführen und deren Ergebnis sofort in der Konsole nachvollziehen kannst. Kurz: es ist ideal für das Debugging von Webanwendungen geeignet.

Mott schrieb:
Im alten code war content immer undefined.

... was das korrekte Ergebnis deiner Anweisung ist. children als Funktion hat kein Attribut namens tagName. Es ist nicht definiert.

Mott schrieb:
wenn ich nur $(this).children().get(0); schreibe, gibt er mir aber öfters ein Image oder Div element aus.

Klar, du bekommst ja mit children() eine (potenziell leere) Menge an Elementen zurück. Dort musst du das richtige raussuchen oder den Selektor anders strukturieren; diese einzelnen Elemente kannst du dann weiter behandeln.

Duddle

Mott · 12.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Firebug hab ich

Seit kurzem hängt sich firefox aber immer auf, wenn meine seite geöffnet wird... jetzt verwende ich chrome, das hat schon eine ähnliche konsole eingebaut.

Ich habe jetzt verschiedene Möglichkeiten ausprobiert, auch wie du gesagt hast mit $(this).children().get(0).tagName; , so ist es auch auf anderen seiten beschrieben, nur bei mir funktioniert nichts. content wird mir entweder gar nicht ausgegeben oder es ist undefined, oder es wird mir in der Form HTMLDivElement gegeben. Irgendwie habe ich den eindruck, dass .tagName bei mir nicht funktioniert, ich sehe aber keinen grund dafür.

Inzwischen hab ich bisschen was anders probiert, dabei wird mir aber auch nur HTMLDivElement bzw. HTMLImageElement ausgegeben.

$("#wrapper > div").each(function(){

var content = $(this+" :first")[0].tagName;
alert(content);
switch (content){
case "IMG":
$(this).addClass("picbox");
break;
case "video":
$(this).addClass("vidbox");
break;
case "a":
$(this).addClass("linkbox");
break;
default:
$(this).addClass("textbox");
};

});

Duddle · 12.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Gib ein Minimalbeispiel plus relevanten Code, dann kann man das mal nachvollziehen.

Das Problem wird wohl die Reihenfolge sein, mit der du auf die Elemente zugreifst. Es kann sein, dass JS zwischendurch Umwandlungen durchführt, die du beachten musst. Prinzipiell sollte das aber so funktionieren.

Duddle

Mott · 12.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

Ich hab in oberster ebene den wrapper, darin liegen dann in einzelnen divs die posts, teilweise mit img- oder anderen elementen.

Code:

<div id="wrapper">
   <div>Text</div>
   <div><img src="bild.jpg" /></div>
</div>

Duddle · 12.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<title>Mott-Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="screen">
	    .bild { border: 1px solid red; }
	    .link { border: 1px solid green; }
	    .text { border: 1px solid black; }
	</style>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" language="javascript" charset="utf-8">
	    $(document).ready(function() {
		$("#wrapper div").each(function() {

		    var c = $(this).children();

		    if(c.length > 0) {
		    	//dieses div hat kinder
			//jedes kind einzeln untersuchen
			c.each(function() {
			    var tag = $(this)[0].tagName;
			    switch(tag) {
				case "A":
				    $(this).addClass("link");
				    break;
				case "IMG":
				    $(this).addClass("bild");
				    break;
				default:
			    }
			});
		    } else {
			//dieses div hat keine kindelemente
			$(this).addClass("text");

		    }
		});
	    });
	</script>

    </head>

    <body>
	<div id="wrapper">
	    <div>Text</div>
	    <div><a href="#">Link</a> <img src="bild2" /></div>
	    <div><img src="bild.jpg" /></div>
	</div>      
    </body>
</html>

Die Logik stimmt wahrscheinlich für deinen Fall nicht genau, weil ich nicht weiß ob die einzelnen Kinder die Klassen bekommen sollen oder die entsprechenden <div>s. Ich vermute aber, du kannst das anpassen.

Duddle

Mott · 12.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

So funktionierts, Grandios!! Riesen Dank

Bei mir sollten schon die darüber liegenden divs die klassen bekommen, aber das konnte ich selbst mit .parent() ganz easy lösen

Ach wie schön, nach ewigkeiten nach herumprobieren und recherchieren endlich die lösung XD

mindraper · 15.02.2012

AW: [jQuery] Klasse nach Tag-Name zuordnen

hi.

ich weiß, der thread ist eig. closed, aber mit weniger overhead wäre es auch gegangen ( sprich: ohne jQuery ). Sogar einfacher:

PHP:

var divs = document.getElementById( 'wrapper' ).getElementsByTagName( 'div' ), i;
if( divs.length > 1 ){
    for( i = 0; i < divs.length; i = i+1 ){
        var div = divs[i];
        
        switch( div.firstChild.nodeName ){
            case 'IMG':
                div.className = ( div.className + ' bild' );
                break;
            case 'A':
                div.className = ( div.className + ' link' );
                break;
            default:
                div.className = ( div.className + ' text' );
                break;
        }
    }
} else {
    divs[0].className = ( divs[0].className + ' text' );
}

damit könnte man einigen overhead sparen und der code ist – zumindest meinem empfinden nach – auch einfacher zu verstehen.

ansonsten passiert hier aber ( fast ) genau das gleiche vom ablauf her, was auch bei Duddles code passiert.