加載到下一個元素

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，然後調用load。

$('.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樣品所以我們可以看到錯誤地發生了什麼？