文書の後半で.html（）を使用してコンテンツを後で変更する方法

Question

チェックボックスをオンにすると、2 <p>タグのhtmlを書き直す必要があります。注：<div class="summary">コンテナは、DBからの出力に基づいて何度も繰り返します。

* HTML *

<div class="summary"> 
    <div>Data 1</div> 
    <div>Data 2</div> 
    <div class="col_5"><input type="checkbox" /></div> 
</div> 
<div class="details"> 
    <p>label:</p><p>info</p> 
    <p>label 2:</p><p>more info</p> 
    <p class="jQuery1">another label to be changed:</p><p class="jQuery2">final info to be changed</p> 
</div> 

*のJavaScript（すべてはコメントを除い作品1 & 2）*

$(document).ready(function(){ 
    $('input:checkbox').change(function(event) { 
     $(this).closest('div.col_5').html('Yes'); 
     $('div.details').next('p.jQuery1').html('Changed 1'); // c1 -- this does not work 
     $('div.details').next('p.jQuery2').html('Changed 2'); // c2 -- this does not work 
    }); 
    $('.summary').click(function(e){ 
     if ($("input:checked").length == 0) { 
      $(this).next('.details').slideToggle('slow'); 
     } 
    }); 
}); 

Answer 1

の可視性を得るために、その行をコメントしていますが、あなたがそうあなたをそれを呼び出す要素の子供を見つけようとしています.children()（直接の子のみを取得する）または.find()（子、孫などの子孫を取得する）を使用する必要があります。

次のことを試してみてください。

$('input:checkbox').change(function(event) { 
    var $div = $(this).closest('div.col_5'), 
     $nextDiv = $div.closest('div.summary').next('div.details'); 
    $div.html('Yes'); 
    $nextDiv.find('p.jQuery1').html('Changed 1'); 
    $nextDiv.find('p.jQuery2').html('Changed 2'); 
}); 

あなたはそれがその後のdivを見つける必要があり、あなたがすることはできませんので、私はクリックしたチェックボックスの親のdivに（$div）の参照を保持していた理由がありますdiv33のhtmlを文字列 'Yes'に上書きした後にthisを使用します。これは、thisが参照する要素を削除するためです。

Answer 2

の代わりにnext()使用find()かchildren()：あなたはクラスの詳細

$('div.details').find('p.jQuery1').html('Changed 1'); 

http://jsfiddle.net/HTaKV/2/

と中でdivの内側の子供たちを見てしようとしているため

$('div.details').find('p.jQuery1').html('Changed 1'); 

Answer 3

使用ではなく、次のを見つけます2番目のバインディングはslideToggleをやっているので、変更されたコンテンツは隠れてしまいます。だから私は、変更

.next()方法は、あなたがそれを呼び出す要素の次の 兄弟を返し