为什么只有我的第二个 if 语句给出结果并覆盖我的第一个 if 语句？

Question

我正在为 IMDB 构建一个爬虫并遇到了一个问题。它不是技术性的，但是，似乎更概念化。我在下面附上了我的代码。所以我想弄清楚的是为什么只有第二个 if 语句运行？每当我运行该程序时，我的数组 (Metascore) 都会填充来自第二个 if 语句的值。注意：两个 if 语句都运行，但只有第二个的值填充数组。

我认为这可能与 .find() 有关，但我想不出一个解释。我还附上了一张图片，显示了我试图抓取的 HTML 的结构。网站链接是：https ://www.imdb.com/search/title/?groups=top_1000&ref_=adv_prv 。

最后一张图片显示了代码结果。

如果有人有解决方案或想法，请将其放在下面。谢谢。

  $('.ratings-bar').each((i, el) => {

    if($(el).find('.ratings-metascore .favorable')){

      metascore[i] = $(el).find('.ratings-metascore .favorable').text().trim();

    }

    if($(el).find('.ratings-metascore .mixed')){

      metascore[i] = $(el).find('.ratings-metascore .mixed').text().trim();

    }

  })

  console.log(metascore);

Answer 1

问题是$(el).find('.ratings-metascore .favorable').text()即使没有找到元素，实际上返回 '' 一个空字符串，所以每次都用空字符串$(el).find('.ratings-metascore > .mixed').text()覆盖的结果。metascore[i]$(el).find('.ratings-metascore .favorable').text()只是注释掉if($(el).find('.ratings-metascore .mixed')){&nbsp; &nbsp;metascore[i] = $(el).find('.ratings-metascore .mixed').text().trim();}你会看到你的.favorable结果更新由于这两个条件都返回 true，因为find()返回总是一个对象，你必须添加.length > 0到你的 if 条件以使其正常工作&nbsp;$('.ratings-bar').each((i, el) => {&nbsp; &nbsp; if($(el).find('.ratings-metascore .favorable').length > 0){&nbsp; &nbsp; &nbsp; metascore[i] = $(el).find('.ratings-metascore .favorable').text().trim();&nbsp; &nbsp; }&nbsp; &nbsp; if($(el).find('.ratings-metascore .mixed').length > 0){&nbsp; &nbsp; &nbsp; metascore[i] = $(el).find('.ratings-metascore .mixed').text().trim();&nbsp; &nbsp; }&nbsp; })详细解释假设你有这个 HTML<div class="a">&nbsp; <span class="b">hello</span>&nbsp; <span class="b">world</span></div>然后你运行这个javascript$(document).find('.a .b');/*** this code will return an Object like the following* {*&nbsp; &nbsp;"0": span.b(DOM element)*&nbsp; &nbsp;"1": span.b(DOM element)*&nbsp; &nbsp;length: 2* }*/$(document).find('.a .b').text();/*** this code will return a string like the following* helloworld*/如果你运行这个你试图找到.a .c不存在的元素$(document).find('.a .c');/*** this code will return an Object like the following* {*&nbsp; &nbsp;length: 0* }*/$(document).find('.a .c').text();/*** this code will return an empty string, since no element was found*/因此，在这两种情况下，结果find()始终是一个 Object，它在语句中始终为TRUEIF，并且由于text()始终返回一个字符串（未找到任何元素时为空字符串），这就是为什么您的第二个条件总是覆盖第一个条件，因为它总是真实的。

Answer 2

从屏幕截图中我可以看出您要查找的元素实际上并不同时具有类ratings-metascore和mixed. 您正在做的是尝试通过父元素属性和子元素属性访问元素，应该这样做：$('.ratings-bar').each((i, el) => {&nbsp; if($(el).find('.ratings-metascore > .favorable')){&nbsp; &nbsp; metascore[i] = $(el).find('.ratings-metascore > .favorable').text().trim();&nbsp; }&nbsp; if($(el).find('.ratings-metascore > .mixed')){&nbsp; &nbsp; metascore[i] = $(el).find('.ratings-metascore > .mixed').text().trim();&nbsp; }})console.log(metascore);

Answer 3

您必须通过第二个 if 语句创建一个 else if，然后它必须起作用。PS：抱歉我的英语不好。

Answer 4

一个更简单的方法是：metascore[i] = $(el).find('.ratings-metascore .favorable').text().trim() ||&nbsp;&nbsp; $(el).find('.ratings-metascore .mixed').text().trim()请注意，如果元素不存在，这些都将评估为空字符串，这在 javascript 中是错误的：let foo = "" || "bar"// foo is now "bar"