Как использовать .html() для изменения содержимого позже в документе

Question

Мне нужно переписать html в теги 2 <p>, когда я устанавливаю флажок. Примечание: контейнер <div class="summary"> повторяется много раз на основе вывода из БД.

* 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

Метод .next() возвращает следующий родственный элемента вы называете его, но вы пытаетесь найти детей элемента вы называете его, так что вы должен использовать .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, по которым щелкнули CheckBox является потому, что вам это нужно, чтобы найти DIV потом и вы не сможете используйте this после того, как вы перезаписали html div с помощью строки «Да», так как это удаляет элемент, на который ссылается this.

Answer 2

Вместо next() использование find() или children():

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

Answer 3

использование найти вместо следующего, потому что вы пытаетесь выглядеть детей внутри DIV с деталями класса

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

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

и в второе обязательство, вы делаете slideToggle, чтобы скрыть содержимое, которое скрывается. Поэтому я заметил, что линия, чтобы получить видимость изменения