JQuery получить родительский брат только для этого элемента

Я не могу понять, как это записать.

См. мою структуру разметки, которая повторяется несколько раз на странице.

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

Как вы можете видеть внутри моей разметки, у меня есть <span>, который является моим $metaButton - при щелчке, он запускает анимацию на div.archive-meta-slide - это достаточно просто, но я пытаясь запустить анимацию только в текущем div.module, она анимирует все div с классом "archive-meta-slide", и я действительно пытаюсь анимировать только текущий div.archive-meta-slide с помощью this

Было бы легко, если div.archive-meta-slide находился внутри родительского div $metaButton, но поскольку он вне этого родительского div, я не могу правильно пройти.

Смотрите мой 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");
});

Может ли кто-нибудь помочь?

Спасибо Джош

Ответы

Ответ 1

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

Это действительно близко. Это фактически говорит "найти элементы с классом archive-meta-slide, которые являются потомками братьев и сестер этого родительского элемента". Вы хотите сказать "найти элементы с классом archive-meta-slide, которые являются братьями и сестрами этого родителя элемента". Для этого используйте селектор при вызове siblings:

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

Обратите внимание, что если разметка всегда является такой структурой, вы даже можете сделать $(this).parent().next().

См. API jQuery:

Ответ 2

Используйте $(this).closest(".module"), чтобы найти родительский модуль, из которого происходит щелчок.

Возможно, вы также захотите использовать функцию завершения, чтобы изменить текст после анимации.

Самое приятное в .closest() заключается в том, что он просто ищет родительскую цепочку настолько, насколько это необходимо, пока не найдет объект с правильным классом. Это намного менее хрупко, чем использование определенного количества ссылок .parent(), если кто-то еще немного изменит ваш HTML-дизайн (добавляет еще один div или span или что-то подобное в родительской цепочке).

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

Вы также можете немного иссушить его и сделать общую функцию:

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

Ответ 3

Вы ищете...

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

Если структура #module изменяется, это может быть более надежным:

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

Ответ 4

Используйте

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

Это так же хорошо, как поиск детей верхнего модуля div

$(это).parent(). Родитель()

будет вашим верхним

<div class="module">

Ответ 5

Используйте

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

Ответ 6

Попробуйте closest, который позволит вам вернуться назад, пока не дойдете до родителя с указанным селектором.

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