如何用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_keyaclass而不是id。

<div class="ht_key ht_all">

这样你的 HTML 就有效了。

或者将 更改onclick为 pass this，然后执行closest()up to ht_all：

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

js

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

如果您采用这种方法，我将使用 HTML5data-属性ht_key：

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

如果您使用的是最新版本的 jQuery，您可以执行以下操作：

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