jQuery 初学者 - 解释这个 if 语句的逻辑

Question

我最近一直在学习一个jQuery教程，那个家伙轻而易举地发现了一些我不太理解的东西......脚本和标记为：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

我在这里不明白的是"if ($(this).text().indexOf("1") ！= -1'背后的逻辑。 我知道 ！= 的意思是"不等于"，我们正在每个 p 元素中寻找一个数字"1"，但我想我不明白 -1 在这里是什么意思以及为什么它使陈述为真。

教程中的家伙只是说"让我们寻找字符串"一"，这不等于一，这意味着它被找到了"，然后继续前进。

我相信这对程序员来说是非常明显的，但我更像是一个前端开发人员，试图获得jQuery和Javascript的一些基础知识。任何对相对外行有意义的解释将不胜感激！

Answer 1

In$(this).text().indexOf("1")-

1. 在$(this)中，$是jQuery对象，this是函数中当前节点的引用，并作为选择器传递给jQuery对象。
2. .text()jQuery函数从HTML节点中选择文本(不是html)(点1)
3. .indexOf("1")JavaScript 核心函数在所选文本(第 2 点)中找到"1"的位置(称之为子字符串，不要与索引 1 混淆)[1 出现在第一段中](如果indexOf("Find_What")没有找到我们要求的内容，它会返回-1。

基本上indexOf返回字符串中匹配项的索引，并且它 如果存在匹配项，则可能是 0、1 等，否则-1匹配项不存在 目前。

例如-

"1st paragraph".indexOf("1");

IndexOf("1") 将返回 0，因为它位于第一个位置。

"<p>paragraph 1</p>".indexOf("1")在这种情况下，它将返回 13。

因此-1字符串中缺少"1"(匹配)是肯定的情况。

PS-此外，indexOf是更快和首选的函数，用于在JavaScript中的字符串中搜索某些内容。

在这里，您可以满足您对"indexOf"更多知识的渴望。

Answer 2

indexOf() 函数返回字符串中首先出现要搜索的子字符串的位置，如果子字符串未出现，则返回 -1。

在此示例中，text().indexOf("1")返回 1 首次出现的位置。 如果1不存在，则 indexOf() 返回 -1。

Answer 3

if ($(this).text().indexOf("1") != -1)

JavaScript 的indexOf()如果作为参数提供的字符串不包含在搜索的字符串中，则返回-1，否则返回搜索字符串在搜索字符串中的位置。

与大多数语言一样，JavaScript 使用从零开始的索引，因此返回值0意味着"1"出现在搜索字符串的最开头。

Answer 4

>函数replacementFn将检查$(this).text()(称为元素文本)是否包含"1".indexOf("1")，如果包含，它将返回"<p>This is paragraph uno</p>"

当indexOf()值等于-1时，这意味着它没有找到匹配项，因此我们希望它不等于-1aka!= -1

然后，jQuery的.replaceWith()将使用返回的字符串来替换匹配元素的文本。

Answer 5

indexOf 返回存在 "1" 的位置。 indexOf("1") 将在 'T0'， 'h1'， 'i2'， 's3'、' 4'、'i5'、's6'、' 7'， 'p8'， 'a9'， 'r10'， 'a11'， 'g12'， 'r13'， 'a14'， 'p15'， 'h16'， ' 17'， '118' 中返回 18 而对于其他字符串，它将返回 -1，因为这些字符串中不存在 1

Answer 6

让我们作为一个整体来研究这个片段，以便您可以更好地理解它。

您可以看到有一个$(document).ready()调用 - 这会检查是否已加载整个页面，如果是，则执行作为参数传递的函数。

该函数包括搜索 DOM 节点(您现在可以将它们理解为 HTML 元素，但它有点复杂)，这些节点可以通过#example p选择器描述 - 基本上，这意味着$('#example p')调用将返回 id 为example的元素中包含的所有<p>元素。

稍后，有一个链式方法调用 -.replaceWith()，它将函数作为参数。此链式方法调用的作用是将调用它的元素的内容替换为作为参数传递给它的内容。在这种情况下，它是我们的参数函数返回的内容。

replacementFn函数搜索上述使用.indexOf()方法作为$(this)传递的 DOM 节点的内容(.text())，该方法在调用它的字符串中搜索作为参数传递给它的字符序列，如果找不到序列或大于-1的整数，则返回-1， 但不能大于调用它的字符串的长度，如果找到序列 - 在这种情况下，返回的数字是字符串的索引，所寻求的序列从该索引开始。

回到replacementFn- 它搜索它传递的 DOM 节点的文本内容，如果它包含字符1(因此.indexOf()返回的值大于-1)，它将节点的内容更改为<p>This is paragraph uno</p>。

如果节点不包含1字符(即-1返回的.indexOf()方法)，则它通过返回其当前内容使节点保持原样，因此.replaceWith()方法不执行任何操作。

我希望你现在明白了 - 如果你不清楚什么，请通过评论告诉我。

相关链接：

http://api.jquery.com/replacewith/

http://api.jquery.com/text/

https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf/