Question

此show-hide函数尝试匿名执行此操作，而无需为目标div维护唯一ID。

我无法理解为什么var div的选择器在示例＃4中不起作用，以及我如何能够使其适用于所有显示的示例。

$('.expander').click(function(e)
{
    e.preventDefault();
    var div = $(this).nextAll('div.content').first();
    if (div)
    {
        if (div.css('display') == "none")
        {
            div.show();
            $(this).removeClass("closed");
            $(this).addClass("open");
        }
        else
        {
            div.hide();
            $(this).removeClass("open");
            $(this).addClass("closed");
        }
    }
});

<div>
    <a href="#" class="expander open">example 1</a><br />
    <div class="content open">shown content</div>
    <a href="#" class="expander closed">example 2</a><br />
    <div class="content closed">hidden content</div>
    <a href="#" class="expander closed">example 3</a><br />
    <!-- comments -->
    <span>other content</span>
    <div class="content closed">hidden content</div>
    <p>
        <span>
            <a href="#" class="expander closed">example 4</a>
        </span>
    </p>
    <div class="content closed">content</div>
</div>

前三个例子运行正常。但是当我部署这段代码时，我发现锚的编码方式有所不同。我正在寻找一种解决方案，无论锚是如何封装的，都能正常工作。

底线是我想为锚点选择下一个div.content，无论它是否是下一个，或者jQuery是否必须稍微向上走DOM树来找到它。

我有一个代码here的工作模型。

Answer 1

因为您的锚点nested inside a span再次嵌套在a ptag

中

在示例＃4中，这没有意义 var div = $(this).nextAll('div.content').first();

对于示例＃4 ，您需要此选择器

var div = $(this).closest('p').nextAll('div.content').first();

Answer 2

我让这个工作走向父树，直到我看到下一个目标div。

var div = $(this).nextAll('div.content').first();
if (div.length == 0)
{
    div = $(this).parentsUntil('body').nextAll('div.content').first();
}

我不喜欢条件，但除非我找到更优雅的东西，否则我会坚持这一点。

jQuery show-hide远近找到下一个元素

2 个答案: