wood burning stoves*
The moose likes HTML, CSS and JavaScript and the fly likes Retrieve id element by index Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCA/OCP Java SE 7 Programmer I & II Study Guide this week in the OCPJP forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Retrieve id element by index" Watch "Retrieve id element by index" New topic
Author

Retrieve id element by index

Karim Kiswarday
Ranch Hand

Joined: Oct 01, 2010
Posts: 50

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


No fun at the table, no fun in the sack.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61458
    
  67

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.)


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Karim Kiswarday
Ranch Hand

Joined: Oct 01, 2010
Posts: 50

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Look at the jQuery api, is there a onmouseover in it? http://api.jquery.com/category/events/

Eric
Karim Kiswarday
Ranch Hand

Joined: Oct 01, 2010
Posts: 50

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jan 10, 2002
Posts: 61458
    
  67

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()

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Retrieve id element by index