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

Question

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

我认为这可能与 .find() 有关，但我无法找到解释。我还附上了一张图片，显示了我试图抓取的 HTML 的结构。网站 link 是：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

你必须在第二个 if 语句中创建一个 else if，然后它必须起作用。 P.S.: 抱歉我的英语不好

Answer 2

从屏幕截图我可以看出您要查找的元素实际上并没有同时具有类 ratings-metascore 和 mixed。您正在做的是尝试通过父元素属性和子元素属性访问元素，应该这样做：

$('.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 3

问题是 $(el).find('.ratings-metascore .favorable').text() 实际上 return '' 一个空字符串，即使没有找到元素，所以每次 $(el).find('.ratings-metascore > .mixed').text() 都会覆盖 [= $(el).find('.ratings-metascore .favorable').text() 的 17=] 为空字符串。

只需注释掉

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

您将看到 .favorable 结果

已更新

因为两个条件 return 都为真，因为 find() return 总是一个对象，你必须在你的 if 条件中添加 .length > 0它工作正常

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

    if($(el).find('.ratings-metascore .favorable').length > 0){
      metascore[i] = $(el).find('.ratings-metascore .favorable').text().trim();
    }

    if($(el).find('.ratings-metascore .mixed').length > 0){
      metascore[i] = $(el).find('.ratings-metascore .mixed').text().trim();
    }
  })

详解

假设你有这个HTML

<div class="a">
  <span class="b">hello</span>
  <span class="b">world</span>
</div>

你运行这个javascript

$(document).find('.a .b');
/**
* this code will return an Object like the following
* {
*   "0": span.b(DOM element)
*   "1": span.b(DOM element)
*   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
* {
*   length: 0
* }
*/

$(document).find('.a .c').text();
/**
* this code will return an empty string, since no element was found
*/

所以在这两种情况下，find() 的结果始终是一个对象，它在 IF 语句中始终是 TRUE，并且由于 text() 总是 returns a string （没有找到元素时为空字符串）这就是为什么你的第二个条件总是覆盖第一个，因为它总是正确的。

Answer 4

更简单的方法是：

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

请注意，如果元素不存在，这些都将计算为空字符串，这在 javascript 中是错误的：

let foo = "" || "bar"
// foo is now "bar"

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

Why does only my second if statement give results and overrides my first if statement?

javascript

web-scraping

cheerio