jQuery - заменить элемент списка другим элементом из первого элемента списка

Question

поэтому у меня есть список комментариев, который выглядит как

...
<li class="buried">
  <div>
    <a class="show">show this comment</a>
  </div>
</li>

<li>
  <div>
    bla blah..
  </div>
</li>
....

javascript:

$(".buried").click(function(){

   $.ajax({
     ...
     success: function(data){
        alert(data);
        // here I want to replace the li.buried with data
      }
   });
  return false;
});

Как я могу это сделать?

Я пытался с $(this).parents(".buried").replace(data) и не работает: (

Answer 1

Установите параметр context вызова AJAX на this:

$(".buried").click(function(){

   $.ajax({
     url:'some/url',
     context: this,
     success: function(data){
        alert(data);
        $(this).replaceWith( data );
      }
   });
  return false;
});

Поскольку обработчик click находится на <li>, в обработчике this будет ссылаться на <li>, получившее событие.

Я предполагаю, что возвращенный data - это еще один <li>, поскольку это единственная действительная замена. Если вы действительно хотите заменить его содержимое, тогда выполните $(this).html( data ).

Имейте в виду, что если вы сделаете замените сам <li>, вы потеряете обработчик click для этого элемента. Если вы не хотите его потерять, вы можете назначить click как delegate на самом <ul>.