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

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

16 голосов
/ 21 декабря 2011

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

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

<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, я не могу понять, как проходить.

См. мой сценарий 

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

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

Спасибо, Джош

Ответы [ 6 ]

38 голосов
/ 21 декабря 2011 
$(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:

10 голосов
/ 21 декабря 2011

Используйте $(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 голосов
/ 21 декабря 2011

Вы ищете… 

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

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

$(this).closest('#module').children('.archive-meta-slide')
2 голосов
/ 22 июля 2015

Использование 

jQuery(this).closest('.prev-class-name').find('.classname').first()
1 голос
/ 21 декабря 2011

Использование 

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

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

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

будет вашим топом 

<div class="module">
0 голосов
/ 21 декабря 2011

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

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