jQuery：htmlブロックを最も近いクリックされたリンクに追加

Question

リンクをクリックするとhtmlコードブロックを生成しようとしています。私はページに同じリンク "返信"を数回持っています。しかし、私はクリックされたリンクの下にコードを生成したい。私は$（this）を使ってみましたが、うまくいきませんでした。ご協力いただきありがとうございます！より良い解決策があれば教えてください。また、参考のために、私はあなたがテキストを入力するためのテキストエリアを開く返信リンクをクリックするとYoutubeのように返信テキストエリアを作成しようとしています。

サンプルコードは、あなたのJSのためにこれを試してくださいここSample Code

Answer 1

Demo

$(".reply").one('click', function (event) { 
    var html = "<div class='alpha grid_11 underVideo'><ul><li><textarea class='roundedCorners textAreaLabel' rows='4' cols='100' wrap='off' placeholder='Respond to this video...' name='CommentTextArea'></textarea></li></ul></div>"; 
    $(this).parent().after(html); 
    return false; 
}); 

ターゲット要素にクラス.replyがあるので、.normalText a:last-childの代わりにその要素を使用しました。

要素に「クリック」をバインドする代わりに、.oneが使用されます。 .oneを使用すると1回だけ起動し、複数のテキストエリアを追加できなくなります。

$(this)はクリックされた要素を指し、ここではa.reply要素です。 .parent()を使用するとDOMを移動し、親を選択します。spanです。もちろん.after(html)はspanの後にhtmlを挿入します。

return false;は、どのようにこの程度の両方.preventDefault();.stopPropagation();

Answer 2

提供されています：

$(".normalText a:last-child").bind('click', function (event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
    $(this).parent().before("<div class='alpha grid_11 underVideo'><ul><li><textarea class='roundedCorners textAreaLabel' rows='4' cols='100' wrap='off' placeholder='Respond to this video...' name='CommentTextArea'></textarea></li></ul></div>");  
    }); ​ 

$(this)は、現在の要素を返します、あなたのHTMLを追加することができますので、.parent()はDOMで1つ上のレベルに移動します（.beforeの場合、それは先頭に追加です）

Answer 3

していますか？でも代わりにHREFの）（データの使用を検討し、それが動作する可能性があります：

http://jsfiddle.net/C3NNt/