web-dev-qa-db-fra.com

jQuery obtient le frère parent pour cet élément uniquement

Je n'arrive pas à comprendre comment écrire cela.

Voir ma structure de balisage, 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 mon balisage, j'ai un <span> qui est mon $metaButton - lorsque vous cliquez dessus, il exécute l'animation sur le div.archive-meta-slide - c'est assez simple, mais j'essaie d'exécuter l'animation uniquement sur le div.module il anime toutes les divs avec la classe "archive-meta-slide", et j'ai vraiment du mal à n'animer que le courant div.archive-meta-slide en utilisant this

Ce serait facile si le div.archive-meta-slide était dans la division parent de $metaButton, mais parce que c'est en dehors de cette div parent, je ne peux pas obtenir le droit de traversée.

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");
});

Quelqu'un peut-il aider?

Merci Josh

javascriptjquerytraversal
20
Joshc
$(this).parent().siblings().find(".archive-meta-slide")

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

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

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

Voir l'API jQuery:

38
lonesomeday

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

Vous voudrez probablement aussi utiliser une fonction de complétion pour changer le texte après avoir fait l'animation.

La bonne chose à propos de .closest() est qu'il recherche juste la chaîne parent aussi loin que nécessaire jusqu'à ce qu'il trouve un objet avec la bonne classe. C'est beaucoup moins fragile que d'utiliser un nombre spécifique de références .parent() si quelqu'un d'autre modifie un peu votre conception HTML (ajoute un autre 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 DRY augmenter un peu et créer 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")}
);
10
jfriend00

Vous cherchez…

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

Si la structure de #module change, cela pourrait être plus robuste:

$(this).closest('#module').children('.archive-meta-slide')
3
s4y

Utilisation

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

Utilisation

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

C'est aussi bien que de rechercher des enfants de div de module supérieur

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

sera ton top

<div class="module">
1
Markandey Singh

Essayez le plus proche qui vous permettra de revenir en arrière jusqu'à ce que vous atteigniez le parent avec le sélecteur spécifié.

$(this).closest(".module")
0
lxalln