如何使用.html（）稍后在文档中更改内容

我需要在选中复选框时重写2 <p>标记中的html。注意：<div class="summary">容器根据数据库的输出重复多次。如何使用.html（）稍后在文档中更改内容

* 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'); 
     } 
    }); 
});

来源

2012-03-12 H. Ferrence

的.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的原因是因为你需要它之后找到的div，你将不能够使用this，因为它删除了this引用的元素，因此您将div的html覆盖为字符串'Yes'。

来源

2012-03-12 03:34:40 nnnnnn

在我的脚本中不适用于我。 – 2012-03-12 03:39:48

我的歉意，请参阅我的编辑。在调用'.next（）'之前，我的原始答案没有从'.col_5'到'.summary'。 – nnnnnn 2012-03-12 03:41:51

修订版现在完美运作。非常感谢@nnnnnn !!!! – 2012-03-12 03:45:27

代替next()使用find()或children()：

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

来源

2012-03-12 03:22:50 elclanrs

工作，除了它改变了每个p.jQuery * - 不只是“下一个”。我只需要改变下一个实例。我会尝试孩子（），看看是否更好。 – 2012-03-12 03:27:54

孩子（）做了同样的事情find（）做 - 它改变了每个人的实例。 – 2012-03-12 03:35:29

使用发现的，而不是未来，因为你想看看在div内的儿童类的细节

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

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

，并在你正在做的第二个绑定slideToggle，所以更改的内容被隐藏起来。所以我评论说一线得到改变

来源

2012-03-12 03:27:51 Shyju

如何使用.html（）稍后在文档中更改内容

回答

相关问题