Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Retrieve id element by index

 
Karim Kiswarday
Ranch Hand
Posts: 50
Eclipse IDE Java PHP
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi folks,
I'm studying on the JQuery in action book and I have a question about the first example in the fourth chapter.

The full code is:


Now I have tried to change the code present in the ready function in the follow manner:

but it doesn't work.

The original code tells:
select THE FIRST ELEMENT with id equal to "example" and at the onmouseover property assign...

my changed code (should) tells
select THE ELEMENT with id equal to "example" and at the onmouseover property assign...

Now id elements are unique and I don't understand why I need to put the index 0 ([0]) to retrieve the element.
I think it's superfluous but maybe it's not.

Where I wrong?

Thanks
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64830
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Karim Kiswarday wrote:I think it's superfluous but maybe it's not.

No "maybe" about it. Why would I have put it there if it's superfluous?

The object returned from any call to the $ function is a jQuery wrapped set. It is not a reference to the selected elements (remember, many elements could have been selected). Just because only one element is selected doesn't change the fact that the object is a set, not a single element.

However, the wrapped set object allows the elements within it to be indexed like a JavaScript array. The [0] returned the first (and in this case, only) element in the wrapped set.

You could also use .get(0) to obtain the reference.

(You may want to go back and reread chapter 2 if any of this is a surprise to you.)
 
Karim Kiswarday
Ranch Hand
Posts: 50
Eclipse IDE Java PHP
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm a little bit confused

Why this code works properly without use the index? (maybe because it hide all elements in the wrapped set?)

but in the example we need to use it?

and why this code with the index is wrong and I need to re-wrap the result?


Thanks for the patience.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Look at the jQuery api, is there a onmouseover in it? http://api.jquery.com/category/events/

Eric
 
Karim Kiswarday
Ranch Hand
Posts: 50
Eclipse IDE Java PHP
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:Look at the jQuery api, is there a onmouseover in it? http://api.jquery.com/category/events/

Eric

No... then?
What I need to look?

More confused than before :/
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You are thinking DOM objects and JQuery objects are interchangeable, they are not. When you use [0] you get the DOM element which has onmouseover. If you do it with the jQuery object you get an error. Check the console.

Look at that link I sent you find what you would use for onmouseover and review the portion of the book that talks about bind.

Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64830
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric is pointing you in the right direction.

Karim Kiswarday wrote:
Why this code works properly without use the index? (maybe because it hide all elements in the wrapped set?)
$('#example').hide()

.hide() is a jQuery method. It must be used on a jQuery wrapped set (what is returned from the call to the jQuery/$ function).

but in the example we need to use it?
$('#example')[0].onmouseover ...

onmouseover is not a jQuery method, it's a property on the element. So you need to fetch the element from the wrapped set before you can reference an element property.

But, as Eric pointed out, you would not use onmouseover on a page using jQuery in the first place! The example is just pointing out a concept.

$('img')[0].hide() //WRONG

Because hide does not exist on the element. It's a jQuery method.

$($('img')[0]).hide() //CORRECT

This will work, but it's not correct! It's ridiculous! Just use: $('img:eq(0)').hide()

 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic