jQuery trouver next et prev élément

J'essaie de trouver un next ou prev élément de l'élément courant. Mais next() et prev() fonction ne peut fonctionner que dans une portée, il ne peut pas accéder à l'extérieur. Pour un exemple de ceci est ce que je veux réaliser:

<ul id="ul1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>
    <ul id="ul2">
      <li>4</li>
      <li>
        <ul id="ul3">
          <li>5</li>
          <li>6</li>
        </ul>
      </li>
      <li>7</li>
      <li>8</li>
    </ul>
  </li>
  <li>9</li>
</ul>

Si l'élément courant est ul1, l'élément suivant est <li>1</li>, prev élément est null.

Si l'élément courant est <li>1</li>, l'élément suivant est <li>2</li>, prev élément est ul1

Si l'élément courant est <li>8</li>, l'élément suivant est <li>9</li>, prev élément est <li>7</li>

  • et si l'élément courant <li>3</li> ? aussi <li>4</li> ??
  • non, ce serait la <li> qui est le parent de #ul2
InformationsquelleAutor StoneHeart | 2010-12-23
  1. 14

    Tout d'abord, ce fut un très soignée problème. Merci de poster!

    Que j'ai accompli cela avec un enchaînés jQuery déclaration. La seule chose c'est, si vous exécutez previous() sur le haut ul vous aurez body. Qui, je pense, techniquement fait du sens. Toutefois, si ce n'est pas le comportement souhaité, voir ma mise à jour ci-dessous.

    Utilisation: next("#ul3") retourne <li>5</li>

    Suivante:

    function next(selector) {
    var $element = $(selector);

    return $element
        .children(":eq(0)")
        .add($element.next())
        .add($element.parents().filter(function() {
            return $(this).next().length > 0;
        }).next()).first();
}

    Précédent:

    function previous(selector) {
    var $element = $(selector);

    return $element
        .prev().find("*:last")   
        .add($element.parent())    
        .add($element.prev())
        .last();     
}

    Mise à jour Si vous souhaitez limiter le haut du nœud précédent peut être, vous pouvez faire: 

    function previous(selector, root) {
    var $element = $(selector);

    return $element
        .prev().find("*:last")   
        .add($element.parent())     
        .add($element.prev())
        .last().not($(root).parent());      
}

    http://jsfiddle.net/andrewwhitaker/n89dz/

    Une autre mise à Jour: Voici un plugin jQuery pour des raisons de commodité:

    (function($) {
    $.fn.domNext = function() {
        return this
            .children(":eq(0)")
            .add(this.next())
            .add(this.parents().filter(function() {
                return $(this).next().length > 0;
            }).next()).first();        
    };

    $.fn.domPrevious = function() {
        return this
            .prev().find("*:last")   
            .add(this.parent())     
            .add(this.prev())
            .last();         
    };
})(jQuery);

    Élargi exemple ici: http://jsfiddle.net/andrewwhitaker/KzyAY/

    • Il travail parfait, j'ai aussi créer un extrait de code ici jsfiddle.net/dqTkY/2. Merci
    • Génial! Content de voir que ça fonctionne.
    InformationsquelleAutor Andrew Whitaker
  2. 5

    Ce un problème intéressant! On dirait que vous êtes l'aplatissement de la structure récursive de HTML, de sorte que c'est la boucle-mesure - je peux le voir venir dans maniable.

    Vous pouvez résoudre le problème par la rupture .next() bas, dans les cas suivants:

    1. Élément a des enfants --> next() est le premier enfant.
    2. Élément n'a pas d'enfants, et n'est pas le dernier enfant --> next() est le même que jQuery .next()
    3. Élément n'a pas d'enfants, est le dernier enfant:
      1. Trouver le plus proche parent qui n'est pas le dernier enfant --> next() est que les parents du frère suivant
      2. Si aucun parent n'existe --> next() est null

    Code (en l'appelant flatNext pour préserver original jQuery .next comportement):

    $.fn.flatNext = function () {
   if (this.children().length) return this.children().eq(0);
   if (!this.is(":last-child")) return this.next();
   if (this.closest(":not(:last-child)").length)
       return this.closest(":not(:last-child)").next();
   return $([]); //Return empty jQuery object rather than null
};

    Et $.fn.flatPrev devrait suivre..

    InformationsquelleAutor David Tang
  3. 1

    En fonction de votre jeu de données, vous pouvez aplatir un peu le tout (en supposant $.find est stable, ce qui, je crois), comme ceci:

    var eles = [];
$("#ul1").find("li").each(function (e) {
    eles.push(e);
});

    L'élément suivant après ele[3] est ele[4] quel que soit le niveau d'indentation.

    Exemple http://jsfiddle.net/xRpmL/

    InformationsquelleAutor Brian M. Hunt