我正在学习 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")
Example div 中的所有内容都会被清除。我不明白的是为什么当至少有一段满足检查时一切正常。但是一旦他们都没有通过检查,一切都会被消灭。
为什么原始代码不删除匹配检查的段落以外的所有内容?
最佳答案
如果会出现 this line在 jQuery 源中是原因。如果替换函数返回的内容对于集合中的所有项均不可用,则整个集合将从 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>
关于javascript - 使用条件函数的 Jquery ReplaceWith() 不符合我的预期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29132459/