Jquery：在某些元素上运行方法，但不在其他元素上运行方法

Question

我很难弄清楚如何在某些元素/节点类型上运行方法，但在其他元素/节点类型上则不然。

例如，这里有一些 HTML：

<div id="parent">
    <div class="subparent">Changing Text
        <div class="no-change">Changing Text</div>
    </div>
    <div class="subparent">Changing Text</div>
        <div class="child">Changing Text
            <div class="no-change">Changing Text</div>
        </div>
    <div class="subparent">Changing Text</div>
</div>

我的方法是这样的：

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
        this.innerHTML = this.innerHTML
        .replace(/Changing Text/ig, "Edited!")
    });
};

现在我想更改除 div.no-change 中的内容之外的所有内容的文本。 最终结果应该是这样的：

<div id="parent">
    <div class="subparent">Edited!
        <div class="no-change">Changing Text</div>
    </div>
    <div class="subparent">Edited!</div>
        <div class="child">Edited!
            <div class="no-change">Changing Text</div>
        </div>
    <div class="subparent">Edited!</div>
</div>

我不知道有什么方法可以选择父级而不在其子级上运行该方法。 任何帮助，将不胜感激。 谢谢！

编辑：这里使用保罗的代码并且不起作用： http://jsbin.com/usaxa

编辑@Jeff Meatball Yang： 您好，使用就地替换它会输出为文本而不是 html： http://jsbin.com/idina

我也无法让其他方法正常工作： http://jsbin.com/aguca

您能提供一个示例吗？

谢谢！

Answer 1

我不太确定你为什么要编写一个插件来执行此操作。 这将找到 #parent 中的所有

元素，过滤掉那些不具有 .no-change 类的元素，并编辑它们：

$('#parent').find('div').not('.no-change').text('Edited!');

也可以写为：

$('#parent div:not(.no-change)').text('Edited!');

jQuery 非常擅长处理元素集，您不必循环遍历它们等。

编辑：

这应该能够考虑到 CMS 的良好观察：

$('#parent').find('div').not('.no-change').each(function() {
    $(this).contents().not('*').eq(0).replaceWith('Whatever');    
});

Answer 2

试试这个：

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
      // filter for text node
      var nodes = $(this).contents().filter(function() { return this.nodeType == 3); });

      // or do in-place editing
      for(var i = 0, len = nodes.length; i < len; i++) {
        nodes[i].nodeValue = nodes[i].nodeValue.replace(/Changing Text/ig, "Edited!");
      }
    });
};

// prove that no change is still white
$("#parent div.no-change").css("color", "white");

// change text, then make it red using jQuery
$("#parent div:not(.no-change)").changingtext().css("color", "red");

最终结果已经是 HTML。 因此，您将能够在插件调用后链接其他 jQuery 函数。 查看我的编辑。

---

您可以删除它并在其后附加一个 DIV，而不是设置文本节点值 (nodes[i].nodeValue)。 您可以删除 for 循环并使用 jQuery 的内置函数，而不是使用 for 循环并替换文本：

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
      // filter for text node
      var nodes = $(this).contents().filter(function() { return this.nodeType == 3); });

      // you can replace the text nodes:
      // insert a DIV after each one, 
      // then remove it from the DOM
      nodes.after("<div>Edited!</div>").remove();
    });
};

这在 jQuery 文档 (http://docs.jquery.com）关于操作和遍历。