загрузить в следующий элемент

Question

Я бы хотел, чтобы следующий код загружал серию классов «держатель». Однако метод after(), как представляется, является гнездом для держателей.

Текущий код

<div class="holder" > 
    <a href="test.html" class="link">lorem ipsum</a><br /> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('.link').click(function (event) { 
      var newHolder = $('.holder').after() 
      newHolder.load(this.href); 
      event.preventDefault(); 
      return false; 
     });  

    }); 
</script> 

** Требуемый выход **

<div class="holder"></div> 
<div class="holder"></div> 
<div class="holder"></div> 
<div class="holder"></div> 

и т.д.

Answer 1

Я думаю, что самый простой способ добиться вывода, который вы хотите может быть это:

$('.link').click(function(e) { 
    e.preventDefault(); 
    $(this).parent().after('<div class="holder"></div>').load(this.href); 
}); 

Answer 2

Если вы хотите, чтобы это было после текущей ссылки, это приведет вас вверх по DOM на один уровень, до текущего div.holder, а затем до следующего .holder, а затем вызвать нагрузку.

$('.link').click(function(e) { 
    var div = $('<div/>',{"class":"holder"}).load(this.href); 
    $(this).parent().after(div); 
    e.preventDefault(); 
}); 

Редактировать: Непонятно, должен быть создан div, да?

Answer 3

jQuery's .after() method "вставляет содержимое, указанное параметром, после каждого элемента в наборе согласованных элементов". Это похоже на правильный вызов API для цели, которую вы описали.

Однако я вижу две проблемы с тем, как вы его используете.

1. Существует ошибка синтаксиса, когда вы опустили ; после after() вызова. Это может потенциально вызвать ошибку JavaScript, которая заставляет скрипт завершаться.

2. Вы не передадите аргумент after. Непонятно, что способ, которым вы его используете, должен вернуть новый объект-держатель. Я до сих пор не совсем понятно, на что вы пытаетесь сделать, но я думаю, что это могло бы работать лучше:

   $('.link').click(function (event) { 
       event.preventDefault(); 
       var linkHref = this.href; 
       $('.holder').each(function(){ 
          $this = $(this); 
          var $clone = $this.clone(); 
          $clone.load(linkHref); 
          $this.after($clone); 
         }); 
       return false; 
   });  
   

Вы можете разместить более полный пример кода (или jsFiddle), включая образец HTML DOM так что мы можем видеть, что именно происходит неправильно?