Sélectionnez pair/impair enfant divs

Je suis en train de créer dynamiquement un "livre" de code côté serveur. Cette partie fonctionne bien, et générer une sortie semblable au suivant:

<div id="pagesContainer">
    <div class="pageContent">
         <div>
             Page 1 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 2 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 3 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 4 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 5 content
         </div>
    </div>
</div>

Ce que je dois faire, de préférence à l'aide de jQuery, c'est d'ajouter des classes à l'intérieur de la plupart des divs comme page-left ou page-right. Par exemple, les pages 1, 3 et 5 de l'obtenir page-left alors que les pages 2 et 4 obtenir page-right. Il y a peut être plus (ou moins) de 5 pages. J'ai essayé d'utiliser un tas de différentes paires/impaires sélecteur de scénarios, mais ne semble pas possible de l'obtenir pour fonctionner correctement.

Quelqu'un peut me pointer dans la bonne direction?

Merci!

jQuery passe dans un entier lorsque vous parcourez avec .each(); tu ne peux pas l'utiliser?

InformationsquelleAutor Matt Millican | 2012-03-28

jquery jquery-selectors

10

Utiliser l' :impair et :même les sélecteurs.

Par exemple:
```
$('.pageContent:odd').addClass("page-left")
$('.pageContent:even').addClass("page-right")
```
- Je suis ce marquage comme la réponse qu'il m'a procuré la plus proche. J'ai fini par utiliser $(".pageContent:nth-child(odd) > div").addClass("page-left"); pour correspondre à mes besoins! Merci!
InformationsquelleAutor Joe Pym

Cela devrait fonctionner.

$('#pagesContainer').children('.pageContent').each(function(index)
{
    $(this).addClass(index % 2 ? 'page-right' : 'page-left');
});

Démo à jsFiddle.

InformationsquelleAutor MacMac

3

Essayer le :odd et :even sélecteurs:
```
$('.pageContent:odd').addClass('odd');
```
Vous pouvez également utiliser :nth-child à profiter de la stimulation du rendement parce que c'est un builtin sélecteur:
```
$('.pageContent:nth-child(odd)').addClass('odd');
```
InformationsquelleAutor jeremyharris

$('.pageContent').each(function(i,t){
 var addClass = i % 2 == 0 ? 'odd' : 'even';
 $(t).addClass(addClass);
})

InformationsquelleAutor samccone

1

Essayez d'utiliser nth-child(even) comme décrit ici: http://www.w3.org/Style/Examples/007/evenodd.en.html
```
.pageContent:nth-child(even) { /* Something amazing */ }
```
- Remarque : il n'est pas CSS tag sur la question ...
- Vous avez tout à fait raison. J'ai lu qu'il voulait ajouter des classes à l'alternance de lignes et couper un coin de suggérer CSS être appliqué directement à l'alternance de lignes, sans remarquer qu' CSS n'était pas balisé. Bien sûr, la classe pourrait faire beaucoup plus que juste le CSS!
InformationsquelleAutor Johno
0

Utiliser ':bizarreand:même les " sélecteurs

http://api.jquery.com/category/selectors/
```
     $('.pageContent:odd').addClass('oddClass')
```
InformationsquelleAutor charlietfl

$(".pageContent:odd").addClass("oddPage");
$(".pageContent:even").addClass("evenPage");

InformationsquelleAutor Paul Grimshaw

0

Est-ce que vous essayez d'atteindre?
http://jsfiddle.net/Sf7AD/3/
```
$('#pagesContainer > div:even').addClass('page-left');
$('#pagesContainer > div:odd').addClass('page-right');
```
Pas que, puisque les éléments sont 0 indexés, :even sera de manière contre-intuitive permet de choisir la première, troisième, cinquième, etc élément

De la documentation
http://api.jquery.com/even-selector/

En particulier, la note que la de 0 basée sur l'indexation signifie que,
de manière contre-intuitive :même sélectionne le premier élément, le troisième élément,
et ainsi de suite à l'intérieur de l'ensemble.

InformationsquelleAutor Andreas Wong

Vous devez vous connecter pour publier un commentaire.