Wie Kind wählen basierend auf ihrer Position im DOM-Baum

Question

sagen, ich habe html wie diese

<div class='parent'> 
    <div class='dad'> 
     <div class='teen'> 
      <div class='baby'> 
      </div> 
     </div> 
    </div> 
    <div class='dad'> 
    </div> 
</div> 

Wie richte ich die div-Tags auf, wie weit sie von den Eltern sind? z.B. .baby hat 3 Eltern davor, und .teen hat 2 Eltern davor. Irgendeine Möglichkeit, dies zu tun? Denn was ich schließlich tun möchte, ist jedes zweite Kind() zu zielen. In diesem Fall möchte ich .dad und .baby auswählen. Aber ich möchte keinen festen Betrag auswählen, ich möchte, dass es jedes zweite Kind() im DOM-Baum unendlich wählt.

Answer 1

var $result = $("div").filter(function() { 
 
    return $(this).parents("div").length % 2 != 0; // if the number of div parents is not a pair number 
 
}); 
 

 
$result.each(function() { 
 
    $(this).css("background", "red"); 
 
});

div { 
 
    border: 1px solid black; 
 
    background: white; 
 
    padding: 10px; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     </div> 
 
     <div> 
 
     <div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    </div> 
 
</div>

Hinweis: Wenn Sie alle Eltern dann diese aufnehmen möchten verwenden:

return $(this).parents().length % 2 != 0; 

Answer 2

Ich denke nth child selector den Trick tun sollten.

Relevante documentation

Beispiel:

$("p:nth-child(3)") 

Der obige Codeausschnitt würde jedes <p> element auswählen, die das dritte Kind seiner Eltern ist. Sie können sich mit den Selektoren und Werten auskennen. Weitere reference auf CSS-Selektoren.

Answer 3

function nthLevelChield(n){ 
    var targetedNode=$('.parent'); 
    for(var i=0; i<n ; i++){ 
     targetedNode=targetedNode.children().eq(0); 
     } 
    return targetedNode; 
} 

Wo n Kind Ebene variabel ist.

Answer 4

Sie können es tun, wie diese für einzelne div-

$('.dad').children().children().eq(0); 

und wenn Sie mehr als ein div haben und u müssen für alle können Sie this-

$('div').each(function(){ 
$(this).children().children().eq(0); 
}) 

Answer 5

Dieser Versuch wird mit jquery: Seltsamer Selektor.

$ ("div: ungerade"). Css ("Hintergrundfarbe", "gelb");
$ ("div: even"). Css ("Hintergrundfarbe", "grün");

Hier sind die alternativen Divs unterschiedlich gefärbt.