如何使用 .html() 稍后更改文档中的内容

Posted 2023-02-25

【中文标题】如何使用 .html() 稍后更改文档中的内容

【英文标题】：How to use .html() to change content later in document

【发布时间】：2012-03-12 03:20:23

【问题描述】：

当我选中一个复选框时，我需要重写 2 个<p> 标签中的 html。注意：<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（除 cmets 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');
        
    );
);

【参考方案1】：

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

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

【讨论】：

除了改变每一个 p.jQuery* 外都有效——不仅仅是“下一个”。我只需要更改下一个实例。我会试试 children() 看看是否效果更好。

children() 和 find() 做了同样的事情——它改变了每个人的实例。

【参考方案2】：

.next() 方法返回你调用它的元素的下一个 sibling，但是你试图找到你调用它的元素的 children 所以你应该使用.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，并且在覆盖div 的 html 带有字符串 'Yes'，因为这会删除 this 所指的元素。

【讨论】：

抱歉，请参阅我的编辑。在调用.next() 之前，我的原始答案没有从.col_5 遍历到.summary。

【参考方案3】：

使用 find 而不是 next 因为您试图在 div 中查看具有类详细信息的子项

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

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

在第二个绑定中，您正在执行 slideToggle，因此更改的内容被隐藏了。所以我评论了那行以获得变化的可见性