jQuery 仅获取此元素的父兄弟答案

【问题标题】：jQuery get parent sibling for this element onlyjQuery 仅获取此元素的父兄弟
【发布时间】：2011-12-21 15:02:51
【问题描述】：

我不知道怎么写。

查看我的标记结构，它在一个页面上重复多次。

<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 之外，所以我无法正确遍历。

查看我的脚本

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

谁能帮忙？

谢谢乔什

【问题讨论】：

标签： javascript jquery traversal

【解决方案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：

【讨论】：

【解决方案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");
        });
    },
});

你也可以把它干一点，做一个通用函数：

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

【讨论】：

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

【解决方案3】：

你正在寻找……

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

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

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

【讨论】：

【解决方案4】：

使用

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

【讨论】：

【解决方案5】：

使用

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

这和搜索顶级模块 div 的子级一样好

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

将是你的首选

<div class="module">

【讨论】：

【解决方案6】：

试试closest，它会让你返回直到你到达带有指定选择器的父级。

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

【讨论】：