Question

基本上我有4个具有相同类名的div。如果“option2”中的文本更改为例如“newoption”，如何将类添加到匹配的div中？

<div class="htmlchange">option1</div>
<div class="htmlchange">option2</div>
<div class="htmlchange">option3</div>

示例：

<div class="htmlchange">option1</div>
<div class="htmlchange addclass">newoption</div>
<div class="htmlchange">option3</div>

Answer 1

如果你用JS改变那些htmlchange div的html，你可以直接将你的类添加到那个元素。或者根据本文，您可以监视Document DOM树https://davidwalsh.name/dom-events-javascript。否则change event不会触发div。此事件仅限于{{1元素，<input>框和<textarea>元素。

以下是http://jsfiddle.net/tg5op333/31/的示例 HTML

<select>

JS：

<div class="htmlchange">option1</div>
<div class="htmlchange" id="2">option2</div>
<div class="htmlchange">option3</div>
<input type="button" id="change" value="change">

Answer 2

绑定到自定义事件

 $(".htmlchange").click(function() {
      $(this).trigger('contentchanged');
    });


    $(document).on('contentchanged', '.htmlchange', function() {
      // do something after the div content has changed
      $(this).addClass('test');
    });

Answer 3

<div class="htmlchange">option1</div>
<div class="htmlchange">option2</div>
<div class="htmlchange">option3</div>

包含JQuery的Javascript

$(".htmlchange").bind('DOMNodeInserted DOMNodeRemoved', function() {
$(this).addClass('someotherclass');
});

$("div.htmlchange").each(function (docindex) {
    if (docindex==1)
    {
         $(this).text("someotherclass");
     }
});

JSFiddle

我在javascript中添加的最后一部分仅用于演示目的，以更改选项2中的内容

$("div.htmlchange").each(function (docindex) {
if (docindex==1)
{
$(this).text("someotherclass");
}
});

希望这会有所帮助!!!快乐的编码!!!!

检测对div的html的更改

3 个答案: