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

当我选中复选框时，我需要重写2个

标记中的html。注意：

容器根据DB的输出重复多次

*HTML*

不要使用

next（）

而使用

find（）

或

children（）

：

不要使用

next（）

而使用

find（）

或

children（）

：

---

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

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

---

在第二个绑定中，您正在执行slideToggle，以便隐藏更改的内容。因此，我对该行进行了注释，以获得更改的可见性，请使用find而不是next，因为您试图在div中查找包含类详细信息的子级

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

在第二个绑定中，您正在执行slideToggle，以便隐藏更改的内容。因此，我对该行进行了注释，以获取更改的可见性。

.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，并且在您用字符串“Yes”覆盖div的html后，您将无法使用

this

，因为这会删除

this

引用的元素。

下一步（）

方法返回调用它的元素的下一个同级，但您正在尝试查找调用它的元素的子元素，因此应该使用

.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，并且在您用字符串“Yes”覆盖div的html之后，您将无法使用

this

，因为这将删除

this

引用的元素。

除了它更改了每个p.jQuery*——而不仅仅是“next”之外，其他都有效一个。我只需要更改下一个实例。我将尝试children（）并查看它是否更好。children（）做了与find（）相同的事情--它更改了所有实例。除了它更改了每个p.jQuery*--不只是“下一个”实例。我只需要更改下一个实例。我将尝试children（）并查看它是否更好。children（）find（）做了同样的事情——它改变了所有人的实例。很抱歉，请参阅我的编辑。在调用

.next（）之前，我的原始答案没有从
.col\u 5
向上遍历到
.summary

。很抱歉，请参阅我的编辑。在调用

.next（）

之前，我的原始答案没有从

.col\u 5

到

.summary

。

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