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>

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

编辑：这是使用Paulo的代码而不是工作： http://jsbin.com/usaxa

编辑@ Jeff Meatball Yang：嗨，使用你的inplace替换它输出文本而不是html： http://jsbin.com/idina

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

你能提供一个例子吗？

谢谢！

Answer 1

我不确定你为什么要编写插件来执行此操作。这将找到#parent中的所有<div>元素，过滤掉那些没有.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函数。看我的编辑。

而不是设置文本节点值（nodes [i] .nodeValue），您可以删除它并在其后附加DIV。您可以删除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）中有记录。

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

2 个答案: