javascript - 如何在 jquery select 的返回值上调用 hide

Question

我的 DOM 结构如下:

  <div class="weather-Dashboard"></div>
    Dashboard
    <div class="weather-Charts">
      charts
    </div>
    <div class="weather-Statistics">
      Statistics
    </div>
    <div class="weather-Sites">
      Sites
    </div>

我想选择每个包含 weather 的 div dom 并用 jQuery 隐藏它们。下面是我的 JS 代码:

var e = $('div[class *= "weather"]');
e.each(function() {
  console.log(this);
  this.hide();
});

运行此代码后出现以下错误:

Uncaught TypeError: this.hide is not a function

看来 this 不是 jQuery 对象。我的代码有什么问题？我试过如果只有一个 DOM 匹配查询，我可以调用 e.hide() 来隐藏 dom。但是，它不适用于存在多个 DOM 匹配项的情况。

Answer 1

问题是因为 this 引用了一个没有 hide() 方法的 DOMElement。您需要先将 this 包装在一个 jQuery 对象中:

var e = $('div[class*="weather"]');
e.each(function() {
  $(this).hide();
});

但是您应该注意，您不需要 each() 循环 - 您可以直接在集合上调用 hide():

$('div[class*="weather"]').hide();