为什么只有我的第二条if语句会产生结果，却覆盖我的第一条if语句？

Question

我正在为IMDB构建刮板，遇到一个问题。它不是技术性的，但是似乎更具概念性。我在下面附加了我的代码。所以我想找出的是为什么只有第二个if语句运行？每当我运行程序时，我的array（Metascore）都将填充第二个if语句中的值。注意：这两个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

您必须在第二个if语句之前输入else if，然后它必须起作用。 附注：对不起，我的英语不好。

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()实际上返回''一个空字符串，即使没有找到元素，因此每次$(el).find('.ratings-metascore > .mixed').text()覆盖{{的metascore[i]}结果1}}，其中包含空字符串。

只需注释掉

$(el).find('.ratings-metascore .favorable').text()

，您将看到if($(el).find('.ratings-metascore .mixed')){ metascore[i] = $(el).find('.ratings-metascore .mixed').text().trim(); } 个结果

---

已更新

由于两个条件都返回true，因为.favorable始终返回对象，所以您必须在if条件中添加find()才能使其正常工作

.length > 0

---

详细说明

假设您有此HTML

 $('.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();
    }
  })

然后您运行此javascript

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

，如果您运行此命令，则尝试查找不存在的元素$(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()语句中始终为 TRUE ，并且由于IF始终返回一个字符串（当未找到任何元素时为空字符串），这就是您的第二个条件始终覆盖第一个条件的原因，因为它始终是真实的。

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"