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上运行动画，而它却对所有带有"archive-meta-slide"类的div都运行了动画。我尝试使用this来只对当前的div.archive-meta-slide进行动画，但一直无法实现。

如果div.archive-meta-slide在$metaButton的父级div中，则很容易解决问题。但由于它在这个父级div之外，所以我无法正确遍历dom。

以下是我的脚本

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

有人能帮忙吗？

谢谢 Josh

- Joshc

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

- lonesomeday

Answer 2

使用$(this).closest(".module")查找发生点击的父模块。 你可能还想使用完成函数在动画完成后更改文本。 .closest()的好处是它只会一直向上查找父元素，直到找到具有正确类的对象。如果其他人稍微更改了您的HTML设计（添加另一个div或span等），这比使用特定数量的.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");
        });
    },
});

你也可以让它更加DRY并创建一个通用的函数：

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

- jfriend00

---

使用closest()更加健壮，正如jfriend00所解释的那样。 - XoXo

Answer 3

You’re looking for…

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

如果#module的结构发生变化，这可能会更加健壮：

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

- s4y

Answer 4

使用

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

- rakesh

Answer 5

使用

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

这就像是在查找顶层模块 div 的子元素一样简单

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

将成为您的首选

<div class="module">

- Markandey Singh

Answer 6

试试closest，它可以让你返回到具有指定选择器的父级元素。

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

- lxalln