jQuery - sélectionnez les enfants au même niveau (pair ou impair)

Y at-il un moyen de remplacer CSS suivant avec jQuery?jQuery - sélectionnez les enfants au même niveau (pair ou impair)

.quote-body .quote-body { background: #f5f5f5 } 
.quote-body .quote-body .quote-body { background: #fff } 
.quote-body .quote-body .quote-body .quote-body { background: #f5f5f5 } 
.quote-body .quote-body .quote-body .quote-body .quote-body { background: #fff } 
... 
and so on

Source

2009-12-11 grzes

Est-il question de l'imbrication illimitée des éléments .quote-body? .. légèrement déconcerté au css –

Quelque chose comme cela pourrait fonctionner:

$('.quote-body').each(function() { 
    $(this).addClass($(this).parents('.quote-body').size() % 2 ? 'odd' : 'even'); 
});

Pour chaque élément .quotebody, trouver le nombre d'éléments parents qui a la .quotebody de classe et de prendre modulo de deux pour définir impair ou pair.

EDIT

Testé et travailler magnifiquement. Cette méthode peut être un peu léthargique sur les documents compliqués car pour chaque élément, jQuery doit parcourir tout le chemin jusqu'à l'élément racine. Mais ça fonctionne.

Exemple de travail: http://www.ulmanen.fi/stuff/oddevenchild.php

Source

2009-12-11 22:44:06

qui le fait - grand MERCI! – grzes

J'ai essayé quelque chose de similaire, en définissant des classes paires et impaires, mais en rendant la classe dépendante de la classe du parent. Si le parent est impair, $ (this) doit être pair. Cela dépend beaucoup de l'ordre dans lequel $ (". Quote-body") trouve/renvoie des éléments bien –

N'oubliez pas de cocher la réponse comme correcte si vous l'avez trouvé utile :) –

Je ne peux pas penser à un sélecteur simple qui pourrait résoudre ce problème, mais vous pouvez être en mesure d'atteindre les résultats escomptés en utilisant une boucle while:

var $quotes = $(<containing-elem>).children(".quote-body"), level = 0; 

while($quotes.length > 0) { 
    $quotes.css("background-color", (level % 2 ? "#f5f5f5" : "#fff")); 
    level += 1; 
    $quotes = $quotes.children(".quote-body"); 
}

Pour assurer que vous ne sélectionnez pas initialement trop d'éléments .quote-body, je sélectionne d'abord les éléments .quote-body qui sont les enfants immédiats de l'élément conteneur.

Source

2009-12-11 22:45:19 Xavi

Ceci ne se reproduira que dans le premier enfant du premier enfant, etc. –

Ce n'est pas vrai. La fonction 'children' renvoie tous les enfants immédiats de l'élément sélectionné, pas seulement le premier. Le script que j'ai posté est testé et cela fonctionne. Je vais télécharger une page d'exemple quand je rentre à la maison. – Xavi

OK, vous avez raison, désolé à ce sujet. J'étais confus parce que .children * n'apparaît pas * pour sélectionner les enfants de tous les éléments correspondants (ce qu'il fait en effet) –

jQuery - sélectionnez les enfants au même niveau (pair ou impair)

Répondre

Questions connexes