Как заменить содержимое родительского DIV с JQuery

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 div с одним и тем же «ключом», то при выполнении функции htrc будет заменен только первый div #ht_key. Так как мне нужно заменить содержимое div #ht_key, где был нажат a (из которого вызывается функция htrc), есть ли способ заменить его родительский div (родительский div, который имеет id)?

Я пробовал как родительский, так и ближайший, но ни один из них не возвращал результат. Есть ли у вас предложения?

Спасибо!

Answer 1

Мое предложение было бы сделать ht_key a 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'); 
    // ... 
} 

Если взять такой подход, я бы использовать HTML5 data- атрибут для ht_key:

<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(...)});