如何用jQuery替换父div的内容

Question

我有这个 html 代码：

<div id="ht_key" class="ht_all">
    <div class="ht_bottom">
        <div class="ht_bottom_p">
            <span class="ht_bottom_o">
                <a href="javascript:;" onclick="htrc('key');\">click</a>
            </span>
        </div>
    </div>
</div>

此代码可能会在页面中出现 5-6 次（或更多）。 我想从 htrc 函数中将 #ht_key div 替换为其他一些内容。 （“密钥”在每种情况下都不同）。问题是，如果页面中有 2 个具有相同“key”的 div，那么当 htrc 函数发生时，只有第一个 #ht_key div 被替换。因此，由于我需要替换单击 a（从中调用 htrc 函数）的 #ht_key div 的内容，有没有办法替换其父 div（具有 id 的父 div）？

我尝试过父级和最接近的，但没有一个返回结果。您有什么建议吗？

谢谢！

Answer 1

我的建议是将 ht_key 设为 class 而不是 id。

<div class="ht_key ht_all">

这样你的 HTML 就有效了。

或者更改 onclick 以传递 this，并执行 closest() 直至 ht_all：

<a href="#" onclick="htrc(this);">click</a>

js

htrc( el ) {
    $(el).closest('.ht_all');
    // ...
}

如果您采用这种方法，我会为 ht_key 使用 HTML5 data- 属性：

<div data-key="somekey" class="ht_all">

如果您使用的是最新版本的 jQuery，你可以这样做：

htrc( el ) {
    var $all = $(el).closest('.ht_all');
    var key = $all.data('key');
}

Answer 2

我假设 #ht_key 实际上是锚点的父级（在这种情况下，您的代码片段中缺少结束标记）。我将删除“onclick”并绑定事件处理程序，如下所示：

$("span.ht_bottom_o a").click(function(){$(this).closest(".ht_all").html(...)});