2017-02-20 113 views
1

我最近正在经历一个jQuery教程的家伙轻轻松松过的东西,我真的不明白...脚本和标记是:jQuery初学者 - 解释这个if语句的逻辑吗?

$("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>

的事情,我不明白这里是背后的逻辑“如果($(本)的.text()的indexOf(‘1’)!= -1”。我明白!=表示“不等于”,并且我们正在寻找在一个数字“1”的每个p元素,但我想我不明白这里什么-1表示,为什么它使说法正确。

教程中的人简单地说'让我们找一个字符串“一个”,这不等于一个,这意味着它被发现'然后继续前进。

我敢肯定,这是对程序员非常明显的,但我更多的是前端开发人员试图获得的jQuery和JavaScript的一些基本知识。任何解释,这将是一个相对通俗的意义,将不胜感激!

+4

的'.indexOf()'函数返回'-1'当它没有找到字符串中的搜索目标。 – Pointy

+1

从'.indexOf()'返回的任何非负数都是找到的索引。 “-1”表示没有找到索引,因为“-1”总是在索引范围之外。 (从技术上讲,所有负数始终在索引范围之外,但按照约定使用“-1”。) – David

+1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf – j08691

回答

4

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

  1. $(this)是从jQuery的
  2. 选择
  3. .text() jQuery函数选择文本(未HTML)从选择(点1)
  4. .indexOf("1") JavaScript的核心功能找到的1中的位置选定的文本(2点)[1存在于第一款(如果indexOf("Find_What")没有发现什么,我们要问,它返回-1

基本上indexOf返回匹配字符串中的指数,它可以是0,1 ...

对于示例 -

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

的IndexOf( “1”)将返回0作为它处于第一个位置。

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

所以-1是字符串中没有“1”(比赛)的情况下肯定。

PS-同样的indexOf更快,首选功能来搜索东西在JavaScript字符串。

Here您可以解除对“indexOf”更多知识的渴求。

+1

好的,谢谢(和其他答复),为我清除它。我了解jquery选择器等。我所缺少的是indexOf()返回-1,如果它没有找到,使声明说'如果索引1不等于'找不到'这是有道理的!欢呼每个人。 – Barry

+0

@Barry indexOf是开发人员最喜欢和钟爱的方法。 :) –

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

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

与大多数语言一样,JavaScript使用从零开始的索引,所以0返回值将意味着“1”出现在搜索的字符串的开始。

1

的的indexOf()函数返回,其中被搜索的字符串为首先出现在字符串中的位置,并返回-1,如果子不会发生。

在这个例子中,text().indexOf("1")返回位置1次第一次出现。如果1不存在,则indexOf()返回-1。

0

功能replacementFn将检查$(this).text()(称为元素文本)包含“1” .indexOf("1")如果确实如此,它将返回"<p>This is paragraph uno</p>"

indexOf()值等于-1这意味着它没有找到匹配的,所以我们要它不等于-1又名!= -1

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

0

indexOf返回存在“1”的位置。 ('1')将在'T0','h1','i2','s3','4','i5','s6','7','p8','a9'中返回18。 ,'r10','a11','g12','r13','a14','p15','h16','17','118' ,而其它字符串将返回-1,因为1不是存在于这些字符串通过这个片段作为一个整体

+0

'return 18'是什么意思?你的回答与我们预期的不符。有人可能会返回'-1'给你。 :d –

0

让我们的工作,这样你就可以更好地了解它。

你可以看到,有一个$(document).ready()通话 - 这个检查,如果要是让整个页面已经被加载并执行作为参数传递的功能。

该功能包括搜索DOM节点(现在可以将它们理解为HTML元素,但稍微复杂一些),可以用#example p选择器来描述 - 基本上,这意味着$('#example p')调用将返回所有<p>包含在ID为example的元素中的元素。

后来,有一个链接的方法调用 - .replaceWith(),这需要一个函数作为参数。这种链式方法调用的作用是将所调用的元素的内容替换为作为参数传递给它的内容。在这种情况下,这就是我们的参数函数返回的结果。

通过如$(this)通过与.indexOf()方法,该方法搜索它被称为上作为参数给它传递一个字符序列的字符串并返回-1如果序列前述DOM节点的内容(.text())的replacementFn函数搜索没有被找到或者是一个大于-1的整数,但是不大于它被调用的字符串的长度,如果找到了序列 - 在这种情况下,返回的数字是字符串的索引,从中找到序列开始。

回到replacementFn - 它搜索DOM的文本内容节点它的通过,如果它包含的字符1(ERGO由.indexOf()返回的值大于-1),它改变的节点来<p>This is paragraph uno</p>内容。

如果节点不包含1字符(即.indexOf()方法返回-1),它的叶子节点,因为它是通过返回其当前的内容,使.replaceWith()方法不会做任何事情。

我希望你现在就明白 - 如果有什么东西不清楚,请通过评论告诉我。

相关链接:

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

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

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