次の要素にロード

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ツリーを1レベルにして現在の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呼び出しのように聞こえます。

しかし、どのように使用しているかに2つの問題があります。

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のサンプルを含みます正確に何が正確に起こっていないかを確認することができます。