Question

我正在学习jQuery，而且我正在使用在线教程。我正处于我们学习replaceWith()函数的部分以及如何使用其他函数，因为它的返回结果。看看教师代码，我不明白它是如何工作的。

的jQuery

$("document").ready(function () {
    $("#example p").replaceWith(replacementFn);
    function replacementFn() {
        if ($(this).text().indexOf("1") != -1) {
            return "<p>This is paragraph uno</p>";
        }
    }
});

HTML

<div id="example">
    <p class="a">This is paragraph 1</p>
    <p id="para1">This is paragraph 2</p>
    <p class="b">This is paragraph 3</p>
    <p id="para4" lang="en-us">This is paragraph 4</p>
    <p id="para5" lang="en-gb">This is paragraph 5</p>
</div>

因为代码是像我所展示的那样工作。一个段落替换为"This is paragraph uno"。但是，一旦我将indexOf("1")更改为indexOf("6")，示例div中的所有内容都将被删除。我不明白为什么当至少有一个段落符合检查时，一切正常。但是，一旦他们都没有满足检查，一切都会被消灭。

为什么原始代码不会擦除除了与支票匹配的段落之外的所有内容？

Answer 1

如果看起来jQuery源中的this line是原因。如果替换函数返回集合中所有项目不可用的内容，则从DOM中删除整个集合：

// Force removal if there was no new content (e.g., from empty arguments)
return arg && (arg.length || arg.nodeType) ? this : this.remove();

我会说你正在使用的这个条件替换似乎是某种漏洞，并且没有在jQuery文档中记录。

我建议在进行更换前过滤您要更换的物品：

$("#example p").filter(pickItems).replaceWith(replacementFn);

function pickItems() {
    return $(this).text().indexOf("1") !== -1;
} 

function replacementFn() {
    return "<p>This is paragraph uno</p>";
}

或者，您可以有条件地返回新内容，或者在不替换它们时返回原始项目：

$(function () {
    $("#example p").replaceWith(replacementFn);

    function replacementFn() {
        if ($(this).text().indexOf("6") !== -1) {
            return "<p>This is paragraph uno</p>";
        }
        return this;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="example">
    <p class="a">This is paragraph 1</p>
    <p id="para1">This is paragraph 2</p>
    <p class="b">This is paragraph 3</p>
    <p id="para4" lang="en-us">This is paragraph 4</p>
    <p id="para5" lang="en-gb">This is paragraph 5</p>
</div>

Jquery ReplaceWith（）使用条件函数不符合我的预期

1 个答案: