リピーター内に子DIVのテキストを設定するにはどうすればよいですか？

Question

次のHTMLスニペットを含むリピーターがあります：

<div id='parent'>
    <div id='child1'/>
    <div id='child2'>
         <script type="text/javascript" src="script.js"></script>
    </div>
</div>

「parent」というタグが付いたdivを選択したいscript.js内の関数を使用し、divの内部HTMLをid＆quot; child1＆quot;で設定します。

最終的なHTMLは次のようになります。

<div id='parent'>
    <div id='child1'>This inner text was set by jQuery</div>
    <div id='child2'>
        <script type="text/javascript" src="script.js"></script>
    </div>
</div>

jQueryを使用してどうすればよいですか？

Answer 1

最初に、このようにHTMLをリピーターでコーディングすることはできません。同じIDをページ上の複数の要素に割り当てることはできません。 HTMLで識別を行う場合、識別にクラスを使用する必要があります。

<div class="parent">
  <div class="child1"><div>
  <div class="child2">Click Me<div>
</div>

scriptタグ内の関数は、他のすべてと比較してDOM内のどこにあるかを知る方法がありません。相対DOM関係を導出できるようにするには、関数呼び出しをいくつかの要素に結び付ける必要があります。最も簡単な方法は、jQuery（または他のフレームワーク）を使用して要素にハンドラーを追加することです。

$(function() {
    $('.child2').click( function() {
        $(this).parent().find('.child1').html( 'some html' );
    });
});

上記は、クラス child2 を持つ各DIVにクリックハンドラーを追加し、クリックされると、その親DIV（親にはクラスが不要であることに注意）と正しい子を見つけます。クラスに基づいてHTMLを更新します。 また、上記のスクリプトはリピーター項目ごとに1回ではなく、1回だけページに追加する必要があることに注意してください。

Answer 2

$('#parent').children('#child1').html('html goes here');

Answer 3

あなたの質問はあまり意味がありません。これを行うことができます：

$("#child1").html("blah");

#parent または this への参照は必要ありません。

ただし、そうではないと仮定すると、 this に関連する要素を見つける方法は複数あります：

$(this).children("#child1")

または

$(this).find("#child1") // descendant, not just child

または

$("#child1", this) // descendant, not just child