jQuery obtenir parent, frère ou sœur pour cet élément uniquement

Je ne peux pas comprendre comment écrire cela.

Voir ma marque de la structure, qui est répétée plusieurs fois sur une page.

<div class="module">    
    <div class="archive-info">
        <span class="archive-meta">
            open
        </span>                         
    </div>
    <div class="archive-meta-slide">
    </div>                              
</div>

Comme vous pouvez le voir à l'intérieur de ma marque, j'ai un <span> qui est mon $metaButton - lorsque cela est cliqué, il fonctionne de l'animation sur la div.archive-meta-slide - c'est assez simple, mais je suis en train de lancer l'animation sur la div.module il anime tous les divs avec la classe "archive-meta-slide", et j'ai vraiment du mal à animer seul le courant div.archive-meta-slide à l'aide de this

Il serait facile si les div.archive-meta-slide était à l'intérieur du div parent de $metaButton, mais parce que c'est en dehors de cette div parent, je ne peux pas obtenir la traversée de droit.

Voir mon script

var $metaButton = $("span.archive-meta"),
    $metaSlide = $(".archive-meta-slide");

$metaButton.toggle(
function() {
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "0" }, 300);
    $(this).parent().siblings().find(".archive-meta-slide").html("close");
},
function() {
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "43px" }, 300);
    $(this).parent().siblings().find(".archive-meta-slide").html("open");
});

Peut aider quelqu'un?

Merci
Josh

OriginalL'auteur Joshc | 2011-12-21

  1. 33
    $(this).parent().siblings().find(".archive-meta-slide")

    C'est vraiment fermer. Cela dit effectivement "trouver des éléments avec la classe archive-meta-slide qui sont des descendants de frères et sœurs de cet élément parent". Vous voulez dire "trouver des éléments avec la classe archive-meta-slide que sont les frères et sœurs de cet élément parent". Pour cela, utilisez un sélecteur sur le siblings appel:

    $(this).parent().siblings(".archive-meta-slide")

    Noter que, si le balisage est toujours de cette structure, vous pourriez même faire $(this).parent().next().

    Voir le jQuery API:

    OriginalL'auteur lonesomeday

  2. 9

    Utilisation $(this).closest(".module") de trouver le module parent d'où le clic se produit.

    Vous aussi vous voudrez probablement utiliser une fonction de saisie pour modifier le texte après l'animation.

    La bonne chose à propos .closest() est que ça a juste l'air jusqu'à la chaîne parent autant que nécessaire jusqu'à ce qu'il trouve un objet avec le bouton droit de la classe. C'est beaucoup moins fragile qu'à l'aide d'un nombre spécifique de .parent() références si quelqu'un d'autre à modifier votre conception HTML un peu (ajoute un div ou span ou quelque chose comme ça dans la chaîne parent).

    var $metaButton = $("span.archive-meta");

$metaButton.toggle(
    function() {
        var $slide = $(this).closest(".module").find(".archive-meta-slide");
        $slide.animate({ height: "0" }, 300, function() {
            $slide.html("close");
        });
    },
    function() {
        var $slide = $(this).closest(".module").find(".archive-meta-slide");
        $slide.animate({ height: "43px" }, 300, function() {
            $slide.html("open");
        });
    },
});

    Vous pouvez également SÉCHER un peu et de faire une fonction commune:

    function metaToggleCommon(obj, height, text) {
    var $slide = $(obj).closest(".module").find(".archive-meta-slide");
    $slide.animate({ height: height}, 300, function() {
        $slide.html(text);
    });
}

var $metaButton = $("span.archive-meta");
$metaButton.toggle(
    function() {metaToggleCommon(this, "0", "close")}, 
    function() {metaToggleCommon(this, "43px", "open")}
);
    belle très intelligent. Que c'est bon. Merci
    très utile pour moi, merci!
    l'utilisation de closest() est plus robuste, comme jfriend00 a expliqué.

    OriginalL'auteur jfriend00

  3. 3

    Vous êtes à la recherche pour...

    $(this).parent().next('.archive-meta-slide')

    Si la structure de #module de changements, ce serait peut-être plus robuste:

    $(this).closest('#module').children('.archive-meta-slide')
    Ça marchait aussi. Merci

    OriginalL'auteur s4y

  4. 2

    Utilisation 

    jQuery(this).closest('.prev-class-name').find('.classname').first()

    OriginalL'auteur rakesh

  5. 1

    Utilisation 

    $(this).parent().parent().children('.archive-meta-slide')

    C'est aussi bon que la recherche des enfants de module supérieur div

    $(this).parent().parent()

    seront vos meilleurs 

    <div class="module">
    également travaillé, merci!

    OriginalL'auteur Markandey Singh

  6. 0

    Essayer les plus proches qui vous permettra de revenir en arrière jusqu'à ce que vous atteignez le parent spécifié avec le sélecteur.

    $(this).closest(".module")
    Vais aussi essayer cette grâce

    OriginalL'auteur lxalln