Question

如何在HTML中更改Div内的html而不影响Jquery中父div内的内部div。

到目前为止，我有这个：

HTML：

<div id="div_to_change">
    This is the text
    <br>
    to be changed
    <div id="div_that_shouldnt_change">
       text that should not change
    </div>
    <div id="div_that_shouldnt_change2">
       text that should not change
    </div>
</div>

JQUERY：

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("changed text");

唯一的问题是，如果html上没有标签，它可以正常工作，但是例如在<br>或<strong>等之后它不会改变。

JSFIDDLE HERE

Answer 1

一种方式：

$('#div_to_change').contents().each(function () {
   //select only nodes with type 3 and having a node value to ignore empty lines, format chars etc
    if(this.nodeType == 3 
        && $.trim(this.nodeValue) 
        )
    {
        $(this).replaceWith("changed text")
    }
});

<强> Demo

或者只是使用过滤器：

$('#div_to_change').contents().filter(function () {
    return (this.nodeType == 3 
            && $.trim(this.nodeValue) 
           )
}).replaceWith("changed text");

<强> Demo

如何更改html div而不影响JQuery中的内部div

1 个答案: