jQuery show-hide 查找远近的下一个元素答案

【问题标题】：jQuery show-hide find next element far and nearjQuery show-hide 查找远近的下一个元素
【发布时间】：2012-10-11 17:00:20
【问题描述】：

此显示隐藏函数尝试匿名执行此操作，无需为目标 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的工作模型。

【问题讨论】：

我希望我知道我的帖子中 HTML 的语法着色出了什么问题。
啊。我在帖子中弄清楚了语法着色。 :)

标签： javascript jquery jquery-selectors show-hide

【解决方案1】：

因为你的锚是nested inside a span，它又嵌套在a ptag中

这在 example# 4 的情况下没有意义
var div = $(this).nextAll('div.content').first();

对于 example#4，您需要这个选择器

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

【讨论】：

我在站点范围内使用它，锚标记的编码方式有所不同。您的示例可能有效，但它特定于 P 标记。我希望有一种方法可以对此进行编码，使其适用于所有人，而不仅仅是这种特殊情况……因为坦率地说，还有其他特殊情况。例如，无序列表中的锚标记和 div 等。

【解决方案2】：

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

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

我不太喜欢有条件的，但除非我找到更优雅的东西，否则我会坚持使用这个。

【讨论】：