jQuery: comment faire pour vérifier si l'enfant est d'abord et aussi la dernière

Je suis en train de mettre un style personnalisé pour les éléments qui sont

  • ul - le premier dans le nombre d'enfants (ul.premier)
  • dernier dans le nombre d'enfants (ul.en dernier)
  • le seul enfant (ul.d'abord.dernier ou ul.seulement)

HTML:

<ul class="selector">
    <li class="selector">some li
       <ul class="">
          <li>some fancy li - the ul parent should have first class</li>
       </ul>
       <ul class="">
          <li>some more li - the ul parent should have last class</li>
       </ul>
    </li>
    <li class="selector">some second li
        <ul class="">
          <li>some lonely li - the ul parent should have first and last classes</li>
       </ul>
    </li>
</ul>

alors je suis venu avec un morceau de jQuery en espérant faire le tour

$('ul.selector li.selector > ul').each(function () {
  if ($(this).is(':first') && $(this).is(':last')) {
    $(this).addClass('first last');
  } else if ($(this).is(':first')) {
    $(this).addClass('first');
  } else if ($(this).is(':last')) {
    $(this).addClass('last');
  }
});

Merci pour toute suggestion.

JOUR - là est un violon, vous pouvez jouer avec, sur l'une des réponses: http://jsfiddle.net/qAtpe/

OriginalL'auteur thednp | 2012-07-20

  1. 10

    Pourquoi ne pas simplement ceci :

    $('ul.selector li.selector > ul').each(function() {
    $this = $(this); //cache $(this)
    if ($this.is(':first')) {
        $this.addClass('first'); 
    } 
    if ($this.is(':last')) {
        $this.addClass('last'); 
    }
});

    Ensuite utiliser le code CSS suivant

    .first {
    //this is first
}
.last { 
    //this is last
}
.first.last {
    //this is first and last - ie the only child
}

    Mise à jour

    $('ul.selector li.selector > ul').each(function() {
    $this = $(this); //cache $(this)
    if ($this.is(':first-child')) {
        $this.addClass('first'); 
    } 
    if ($this.is(':last-child')) {
        $this.addClass('last'); 
    }
});
​

    Regardant votre exemple jsfiddle - vous eu besoin de le sélecteur :first-child plutôt et :first ..

    L' :d'abord la pseudo-classe est équivalente à :eq(0). Il peut aussi être écrite comme :lt(1). Bien que cela ne correspond qu'à un seul élément :first-child peut correspondre à plusieurs: Un pour chaque parent.

    Cela fonctionne à présent :

    Exemple de travail

    Beaucoup mieux que ma réponse +1
    merci 🙂
    Agréable et lisse, mais il ne fonctionne pas 😐
    ce qui ne marche pas ? pouvez-vous ajouter votre code HTML ?
    Là vous allez mate jsfiddle.net/qAtpe

    OriginalL'auteur ManseUK

  2. 1

    Il suffit de vérifier si l'élément a tous les frères et sœurs, sinon c'est un seul enfant :

    $('ul.selector li.selector > ul').each(function() {
    if ($(this).siblings().length===0)) {
        $(this).addClass('only'); 
    } else if ($(this).is(':first') ) {
        $(this).addClass('first'); 
    } else if ($(this).is(':last') ) {
        $(this).addClass('last'); 
    }
});
    Je pense que c'est intéressant. Je suis mieux d'apprendre ce que les frères et sœurs ne. Il ne fonctionne pas. Merci d'essayer 🙂

    OriginalL'auteur adeneo

  3. 1

    Je ne sais pas si cela répond à votre question, mais vous pouvez utiliser le sélecteur ci-dessous pour sélectionner LI éléments qui sont seuls, ne vient pas avant/après l'autre LI :

    $('ul:first-child:last-child')

    OriginalL'auteur spetsnaz

  4. 0

    Vous devez l'essayer.

    $('ul.selector li.selector > ul').each(function() {
    $this = $(this);

    if  ( $this.is(':first') && $this.is(':last') ) {
        $this.addClass('first last'); 
    } else {

        if ($this.is(':first')) {
           $this.addClass('first'); 
        } 

        if ($this.is(':last')) {
            $this.addClass('last'); 
        }
    }

});
    que faites-vous de différent que dans la question ? (autre que la mise en cache ?)
    Je présume sa jQuery a été mauvais comme il l'avait posé la question. Aussi, je l'ai enlevé ses multiples si les déclarations
    Ok, maintenant je vois ...
    Votre code est le même que le mien. Merci d'essayer 🙂
    Pas de problème, ManseUK a la meilleure réponse, vous devez accepter le fait que 🙂

    OriginalL'auteur Undefined

  5. 0

    Il peut y avoir dans un seul cas qui

    Si l'enfant est d'abord et, enfin, il sera l'un en nombre, afin de l'utiliser

    $('ul.selector li.selector > ul').children().length ==1

    c'nombre d'enfants est de 1.

    et ne les utilisez pas :d'abord, il ne fonctionne pas dans IE

    L'indentation de 4 espaces pour code pas > et :first travaillera avec IE (toutes versions) en jQuery

    OriginalL'auteur Paritosh Singh

  6. 0

    Vérifier ce violon: http://jsfiddle.net/KCAZQ/. S'il ya un seul élément que je suis en supposant que ceux-ci couvriront il.

    <ul>
    <li>first</li>
    <li>second</li>
    <li>thrid</li>
    <li>fourth</li>
</ul>

$('ul').find('li').first().css('color','green');
$('ul').find('li').last().css('color','green');
    Désolé vous n'avez pas l'obtenir.
    Je n'ai pas de répondre directement à votre question, mais cela vous met sur la bonne voie et nous espérons vous aide dans votre compréhension de jQuery.
    Votre code est l'ajout d'un peu de classe, j'ai vérifié ici jsfiddle.net/KCAZQ/4 Mais cela ne fonctionne pas sur tout, mais seulement la première rencontre.
    /\ Peut-être que je devrais utiliser chacun() 🙂
    Faire .first().last() ne va pas fonctionner comme vous le souhaitez. Si le .each() sont des exemples de travail ensuite de les utiliser. Je voulais juste vous montrer une approche différente.

    OriginalL'auteur Jack

  7. 0

    Je suis tombé sur cette tout en regardant pour le même problème en essayant d'obtenir le dernier li > a dans mon mie de pain qui n'était pas la première li. Voici comment je l'ai résolu:

    $(".breadcrumb > li:gt(0):last > a")

    OriginalL'auteur Garth Martin