Parent & Child 02

Bei Klassen wird es schon unübersichtlicher

by juErik

HTML

<p>--------------- Ebene 0 -----------------|-- 1 --|-- 2 --|
    </p>
    <div class="level0">level0
		<div class="klasse">klasse</div>
		<div class="level1">level1
			<span id="level2">level2 (id)</span>
			<span>Text2b</span>
			<div class="klasse">klasse</div>
		</div>
		<div>Text1c</div>
		<span>Text1d</span>
	</div>

CSS

div, span{
        padding: 15px;
        border: 2px red solid;
        display: block;
    }

    .level0{                        /* Ebene 0 */
        width: 200px;
    }
    .level0 > div, .level0 > span{  /* Ebene 1 */
        width: 220px;
    }
    .level1 > div, .level1 > span{  /* Ebene 2 */
        width: 240px;
    }

JavaScript

/* Es ist nicht die Vererbung - sondern die transparenz der Elemente */

    // parent, das sind ja den die Eltern von klasse
$(".klasse").parent().css("background", "green");      // a
    // level1, ach ja, das ist das Kind ...
    // von dem grünen level1 also level2 !
$(".level1").children().css("background", "yellow");   // b
    // kommen wir zu den Geschwistern ...
$("#level2").siblings().css("background", "red");      // c

// ----------------------------------------------------------------------------
/* Folgende Versuche wahlweise Solo oder in kombination mit abc */ 

    //Wenn ich .level0 einfärbe, ersteckt sich dies auf alle 
    // Kind & Geschwister = also auf alles unterhalb ...    
//$('.level0').css("background", "SkyBlue");                 // 1.
    // wegen der transparenz !!! 

    // und level1, diesmal mit Child (abc inaktiv)
//$('.level1').children().css("background", "SkyBlue");      // 2.
    // färbt natürliche alles Unterhalb mit ein ... (transparenz)

    // versuchen wir es mal mit dem Parent von level2 (achtung id)
//$('#level2').parent().css("background", "SkyBlue");        // 3.
    // Ach ja, es färbt zwar (nur) dessen Elternteil (level1) ein,
    // aber bei transparez werden sie natürlich mitgefärbt ...