CODEWITHSUNDEEP
javascriptjquery
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42500

How to call hide on the returned value from jquery select

My DOM structure looks like:

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

I want to select each div dom which class contains weather and hide them with jQuery. Below is my JS code:

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

After run this code I got below error:

Uncaught TypeError: this.hide is not a function

It seems that this is not a jQuery object. What's wrong with my code? I have tried if there is only one DOM match the query, I can call e.hide() to hide the dom. However it doesn't work for the case when there are multiple DOM matches.

Upvotes: 3

Views: 42

Answers (3)

Kung Fu Panda
Kung Fu Panda

Reputation: 648

var e = $('div[class *= "weather"]');
e.each(function() {
  $(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="weather-Dashboard"></div>
      Dashboard
  <div class="weather-Charts">
    charts
  </div>
  <div class="weather-Statistics">
    Statistics
  </div>
  <div class="weather-Sites">
    Sites
  </div>

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115222

Inside the each() method this refers to DOM object and hide() is a jQuery method so you need to convert it to jQuery object.

$(this).hide();

Or simply update the display style property.

this.style.display = 'none';

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because this refers to a DOMElement which does not have a hide() method. You need to wrap this in a jQuery object first:

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

However you should note that you don't need an each() loop here - you can call hide() directly on the collection:

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

Upvotes: 5

Related Questions