jquery - 如何用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 替换为其他一些内容。 (“ key ”在每种情况下都不同)。问题是，如果页面中有 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');
}