Tukhsanov
Tukhsanov

Reputation: 303

hide() is not working

I wanted to hide my second image with jQuery .hide() but the method is not working in some cases.

Here's my code:

jQuery

var one = $('ul li > img')[0];
var two = $('ul li img')[1];
var three = $('ul li img')[2];

$(two).on('click', function(){
  alert('working');
});

two.hide();

html

<ul>
  <li><img src="http://img.pixland.uz/u13301f281573m.jpg" alt=""></li>
  <li><img src="http://img.pixland.uz/u13301f281573m.jpg" alt=""></li>
  <li><img src="http://img.pixland.uz/u13301f281573m.jpg" alt=""></li>
</ul>

DEMO

Upvotes: 0

Views: 80

Answers (5)

HDT
HDT

Reputation: 2047

var one = $('ul li:eq(0) img');
var two = $('ul li:eq(1) img');
var three = $('ul li:eq(2) img');

Upvotes: 0

Oleg Gryb
Oleg Gryb

Reputation: 5259

All you need to change in your code is two.hide() to ${two}.hide()

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

Try this:

var one = $('ul li > img')[0];
var two = $('ul li img')[1];
var three = $('ul li img')[2];

$(two).on('click', function(){
  alert('working');
    $(two).hide();
});

Upvotes: 1

dereli
dereli

Reputation: 1864

Object named two is not a jQuery object, it's just a plain DOM object. You should either do:

var one = $('ul li > img')[0];
var two = $('ul li img')[1];
var three = $('ul li img')[2];

$(two).on('click', function(){
  alert('working');
});

$(two).hide();

or do:

var one = $('ul li > img').eq(0);
var two = $('ul li img').eq(1);
var three = $('ul li img').eq(2);

$(two).on('click', function(){
  alert('working');
});

two.hide();

Upvotes: 1

jfriend00
jfriend00

Reputation: 708056

$('ul li img')[1] is a DOM object, not a jQuery object so it doesn't have a .hide() method.

You can use this:

$('ul li img').eq(1)

instead, if you want a jQuery object.

The whole code block would look like this:

var one = $('ul li > img').eq(0);
var two = $('ul li img').eq(1);
var three = $('ul li img').eq(2);

two.on('click', function(){
  alert('working');
});

two.hide();

Upvotes: 8

Related Questions