jQuery只为这个元素获取父兄弟

Question

我无法弄清楚如何写这个.

查看我的标记结构,该结构在页面上重复多次.

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

有人可以帮忙吗？

谢谢乔希

Answer 1

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

这非常接近.这实际上是说"查找具有archive-meta-slide该元素的父级兄弟的后代的类的元素".你想说"找到类元素archive-meta-slide即是此元素的父的兄弟姐妹".为此,请在siblings通话中使用选择器:

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

请注意,如果标记始终是此结构,您甚至可以这样做$(this).parent().next().

请参阅jQuery API:

• siblings
• find
• next

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