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设置动画，而我真的很难只为当前的div.archive-meta-slide制作动画。使用this

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

有人可以帮忙吗？

由于约什

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：

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

你也可以把它干掉一点，然后做一个共同的功能：

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

Answer 3

你在寻找......

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

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

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

Answer 4

使用

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

Answer 5

使用

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

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

$（本）.parent（）。亲本（）

将是您的顶级

<div class="module">

Answer 6

尝试使用closest，这样您就可以返回，直到您使用指定的选择器到达父级。

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

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

6 个答案: