jQuery動的親にオブジェクトを追加

jQueryの新機能で、セレクタを動的に変更する際に問題が発生しました。jQuery動的親にオブジェクトを追加

<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script> 
     function addFirst(){ 
     var fc = document.getElementById("fc").value; 
     $("#parent").append("<div id='firstChild" + fc + "'>My boring text.</div><a href='#' onClick='addSecond(\"firstChild" + fc +"\")'>Add Second Child</a>"); 
     fc = (fc - 1) + 2; 
     document.getElementById("fc").value = fc; 
    } 

    function addSecond(){ 
     $(***THE PARENT SELECTOR***).append("<div>Some more boring text.</div>"); 
    } 
    </script> 


    <body> 
    <input type="hidden" id="fc" value="1" 
    <div id="parent"></div> 
    <a href="#" onClick=" addFirst('#parent');">Add First Child</a> 
    </body> 
</html>

私は、テキスト「PARENTのSELECTOR」で示されるように、その親オブジェクトは、動的に作成されたとき、私は、オブジェクトの直接の親を取得し、セレクタを必要としています。誰がこの質問に出くわす場合に

EDIT

これに対する私のソリューションは、onClickイベント内では.call使用することでした。 addFirst（）関数の列に位置

：thisキーワードを意味すると仮定すると

$(this.parentNode).prepend("<div>BlahBlah");

出典

2012-02-29 Plummer

あなたは '$（この）.afterを試してみました（） 'append（）の代わりに？ – Aprillion

私は実際に.prepend（）を使用しました。それらはすべて本質的に同じことを行います。あなたがコンテンツにしたい場所の問題です。私はコンテンツが欲しいと思うdivの中にアクチベータ・リンクを置いて、親子の混乱を避けるようにしました。最も差を作った部分： '<' '' Iは、指定されたどのような対象となる）関数 'addSecond（セレクタのためのパラメータを設定.call'。次に、関数内で： '$（this.parentNode）.prepend（

BlahBlah

）;' addSecond（） '関数の' – Plummer

オブジェクトがどのように作成されたかは関係ありません。セレクタは同じように動作します。

$(this).parent().append("<div>Some more boring text.</div>");

前述のように、オブジェクトへの参照を渡さない限り、これは機能しません。あなたはより多くのjQueryを活用でき、このすべてがはるかに容易になります。

<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script> 
     $(function() { 
     $("body").on('click', '.addsecond', function() { 
      $(this).parent().append("<div>Some more boring text.</div>"); 
     }); 

     $("body").on('click', '.addfirst', function() { 
      var fc = $('.fc').length + 1; 
      $("#parent").append("<div id='firstChild" + fc + "' class='fc'>My boring text.</div><a href='#' class='addsecond'>Add Second Child</a>"); 
     }); 
     }); 
    </script> 
    </head> 

    <body> 
    <div id="parent"> 
     <a href="#" onClick=" class="addfirst">Add First Child</a> 
    </div> 
    </body> 
</html>

注意を、私はクラスにaddfirstとaddsecondを追加したこと。これらは、リンクにハンドラーを自動的に追加するために使用されます（または、より正確には、ハンドラーを本体にアタッチします。これらのクラスでdivをクリックするとトリガーされます）。クリックすると、thisが関数に渡され、そのオブジェクトの親などを見つけることができます。

このコードはさらにきれいにすることができますが、使用方法はわかりません。私は子供達が実際にどこに行くかとは異なる場所に子供たちを追加したいと思っています。

例：これは、ように見えるhttp://jsfiddle.net/XjUzA/

：

<input type="hidden" id="fc" value="1" 
<div id="parent"> 
    <a href="#" onClick=" class="addfirst">Add First Child</a> 
</div>

例：私は推測していた場合はhttp://jsfiddle.net/2LjYH/

、私は#parentはこのようなリンクを、 "最初の子を追加" をラップになるだろうより直観的に働きます。あなたは第二子がリンク後に直接追加したい場合は、あなたが簡単に使用する、まったく.parent().append()を望んでいない.after()：

例：http://jsfiddle.net/XjUzA/1/

出典

2012-02-29 17:13:13

'addSecond（）'関数の 'this'はクリックされた要素への参照ではありません。 –

onClick引数は変更されますか？ – Plummer

@am_not_i_am：私は知っている...私は私の答えの2番目の部分に取り組んでいた理由です。 –

：そして

<a href='#' onClick='addSecond.call(this,\"firstChild" + fc +"\"); return false;'>

は、addSecond（）関数を変更しましたターゲット要素を使用して親を選択することができます

$(this).parent();

出典

2012-02-29 17:12:29 detaylor

'this'はクリックされた要素への参照ではありません。 –

したがって、 function addSecond（）{ $（this）.parent（）。append（

Blahblahblah

）; } 悪いことに、コメント内のコードサンプルに対する愛はありません。 – Plummer

@Tim：コメントのコードの前後にバックティックを入れてください。（ '〜'キーのもの） –

jQuery動的親にオブジェクトを追加

答えて

関連する問題