1

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

例如，这里有一些 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

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

我也无法使用其他方法：http: //jsbin.com/aguca

你能提供一个例子吗？

谢谢！

4

2 回答 2

7

我不确定您为什么要编写插件来执行此操作。这将找到<div>#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');    
});
于 2009-06-23T03:53:30.303 回答
0

尝试这个：

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 ) 中。

于 2009-06-23T17:13:18.180 回答