Selection logic

[Savageman-2]

Hello,

I'm using jQuery but am not really used to it (Mootools' user
here...).

I was trying to add a class to the first parent "div" of an element.
Here is how I proceeded in the first place :
- $(el).parent('div'); // Doesn't return anything: why?

My second attempt was better (intermediate steps for better
comprehension):
- $(el).parents('div'); // Returns all parent div, cool but I only
need the first:
- ($el).parents('div').get(0); // Returns the div I want: yeah again!
- $(el).parents('div').get(0).addClass('myClass'); // Doesn't work:
why?

Finally my last attempt (I asked for help) was the good one:
- $(el).parents('div:first').addClass('myClass'); // Works fine

I was expecting all of the 3 methods to work, but that's not really
what's happening: kind of frustating! Can someone explain me why, so I
become efficient with jQuery?

Thank you in advance for the provided help.
Sincerely,
Savageman.

[waseem sabjee]

 

 

var parent_element = $(".child).parents('div');

On Tue, Nov 10, 2009 at 12:16 PM, Savageman <savageman86@...> wrote:

Hello,

I'm using jQuery but am not really used to it (Mootools' user
here...).

I was trying to add a class to the first parent "div" of an element.
Here is how I proceeded in the first place :
- $(el).parent('div'); // Doesn't return anything: why?

My second attempt was better (intermediate steps for better
comprehension):
- $(el).parents('div'); // Returns all parent div, cool but I only
need the first:
- ($el).parents('div').get(0); // Returns the div I want: yeah again!
- $(el).parents('div').get(0).addClass('myClass'); // Doesn't work:
why?

Finally my last attempt (I asked for help) was the good one:
- $(el).parents('div:first').addClass('myClass'); // Works fine

I was expecting all of the 3 methods to work, but that's not really
what's happening: kind of frustating! Can someone explain me why, so I
become efficient with jQuery?

Thank you in advance for the provided help.
Sincerely,
Savageman.

[Michel Belleville]

• $(el).parent('div'); // didn't work because .parent() (only matches the direct parent, not any ancestors) is not the same as .parents() (matches all ancestors)
• $(el).parents('div'); // returning all matching ancestors is the point indeed
• $(el).parents('div').get(0).addClass('myClass'); // should work, may be a testing error (just tested it, worked for me)
  

Anyway, continue to try things and you'll be efficient with jQuery, don't worry. Coming from another framework and re-learning the lingo is just a phase, it's frustrating but it's worth it. And jQuery may be an acquired taste but it's great once you're used to it.

Michel Belleville

2009/11/10 waseem sabjee <waseemsabjee@...>

 

 

var parent_element = $(".child).parents('div');

On Tue, Nov 10, 2009 at 12:16 PM, Savageman <savageman86@...> wrote:

Hello,

I'm using jQuery but am not really used to it (Mootools' user
here...).

I was trying to add a class to the first parent "div" of an element.
Here is how I proceeded in the first place :
- $(el).parent('div'); // Doesn't return anything: why?

My second attempt was better (intermediate steps for better
comprehension):
- $(el).parents('div'); // Returns all parent div, cool but I only
need the first:
- ($el).parents('div').get(0); // Returns the div I want: yeah again!
- $(el).parents('div').get(0).addClass('myClass'); // Doesn't work:
why?

Finally my last attempt (I asked for help) was the good one:
- $(el).parents('div:first').addClass('myClass'); // Works fine

I was expecting all of the 3 methods to work, but that's not really
what's happening: kind of frustating! Can someone explain me why, so I
become efficient with jQuery?

Thank you in advance for the provided help.
Sincerely,
Savageman.

[Savageman-2]

@waseem sabjee: Don't know what to think of your answer... I already
figured to use .parents() without you... :)

@Michel Belleville: Wow, thank you for that wonderful answer! ;)

About .get(0), Firebug keeps telling me: "$(el).parents("div").get
(0).addClass is not a function"

I still find strange (that eventually gonna change :D) to add the
possibility to match a specified selector in the .parent() method if
it only applies to the direct parent... I don't really need all the
parents here, so it may be more efficient having a method that stops
looping through parents when the one we want is found. I guess I still
can use .parent().parent().parent() as I know the <div> should be the
third parent, but that would require change in the javacscript if i
want to change the HTML structure...

On 10 nov, 13:58, Michel Belleville <michel.bellevi...@...>
wrote:

>    - $(el).parent('div'); // didn't work because
> .parent()<http://docs.jquery.com/Traversing/parent>(only matches the
> direct parent, not any ancestors) is not the same as
>    .parents() <http://docs.jquery.com/Traversing/parents> (matches all
>    ancestors)
>    - $(el).parents('div'); // returning all matching ancestors is the point
>    indeed
>    - $(el).parents('div').get(0).addClass('myClass'); // should work, may be
>    a testing error (just tested it, worked for me)
>
> Anyway, continue to try things and you'll be efficient with jQuery, don't
> worry. Coming from another framework and re-learning the lingo is just a
> phase, it's frustrating but it's worth it. And jQuery may be an acquired
> taste but it's great once you're used to it.
>
> Michel Belleville
>
> 2009/11/10 waseem sabjee <waseemsab...@...>
>
>
>
>
>
> > var parent_element = $(".child).parents('div');
>
> > On Tue, Nov 10, 2009 at 12:16 PM, Savageman <savagema...@...> wrote:
>
> >> Hello,
>
> >> I'm using jQuery but am not really used to it (Mootools' user
> >> here...).
>
> >> I was trying to add a class to the first parent "div" of an element.
> >> Here is how I proceeded in the first place :
> >> - $(el).parent('div'); // Doesn't return anything: why?
>
> >> My second attempt was better (intermediate steps for better
> >> comprehension):
> >> - $(el).parents('div'); // Returns all parent div, cool but I only
> >> need the first:
> >> - ($el).parents('div').get(0); // Returns the div I want: yeah again!
> >> - $(el).parents('div').get(0).addClass('myClass'); // Doesn't work:
> >> why?
>
> >> Finally my last attempt (I asked for help) was the good one:
> >> - $(el).parents('div:first').addClass('myClass'); // Works fine
>
> >> I was expecting all of the 3 methods to work, but that's not really
> >> what's happening: kind of frustating! Can someone explain me why, so I
> >> become efficient with jQuery?
>
> >> Thank you in advance for the provided help.
> >> Sincerely,
> >> Savageman.

[Karl Swedberg-2]

On Nov 10, 2009, at 7:58 AM, Michel Belleville wrote:

• $(el).parents('div').get(0).addClass('myClass'); // should work, may be a testing error (just tested it, worked for me)

Interesting that this one worked for you. I wouldn't expect it to, since the .get() method is supposed to return a DOM element (when an index is passed in), and addClass should only operate on the jQuery object. 

I would expect this to work:

• $(el).parents('div').eq(0).addClass('myClass');

and this:

• $(el).parents('div:eq(0)').addClass('myClass');

and this:

• $(el).parents('div:first').addClass('myClass');

and, in 1.4 (sneak peek!), this:

• $(el).parents('div').first().addClass('myClass');

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

[Michel Belleville]

2009/11/10 Karl Swedberg <karl@...>

On Nov 10, 2009, at 7:58 AM, Michel Belleville wrote:

• $(el).parents('div').get(0).addClass('myClass'); // should work, may be a testing error (just tested it, worked for me)

Interesting that this one worked for you. I wouldn't expect it to, since the .get() method is supposed to return a DOM element (when an index is passed in), and addClass should only operate on the jQuery object. 

Sorry, mistook .get() for .eq() wich is another thing altogether indeed (yeah, I should not rewrite when I test).

Michel Belleville

[Michel Belleville]

2009/11/10 Savageman <savageman86@...>

About .get(0), Firebug keeps telling me: "$(el).parents("div").get
(0).addClass is not a function"

Sorry, I tested with .eq(0) instead of .get(0) which returns the pure DOM element instead of a jQuery magic-array wrapping the element.
 

I still find strange (that eventually gonna change :D) to add the
possibility to match a specified selector in the .parent() method if
it only applies to the direct parent... I don't really need all the
parents here, so it may be more efficient having a method that stops
looping through parents when the one we want is found. I guess I still
can use .parent().parent().parent() as I know the <div> should be the
third parent, but that would require change in the javacscript if i
want to change the HTML structure...

If you don't need all the parents, use .parents('div:first') or .parents('div').eq(0) as you've found out it's the jQuery way.

I may even be so bold as to add you might like to try .closest() which is quite handy to find "the closest matching element this included".

Have fun.

Michel Belleville

[Savageman-2]

Maybe $($(el).parents('div').get(0)).addClass() ? :d (ahah, what ugly
syntax :d)

Anyway thanks, topic solved! ;)

On 10 nov, 15:04, Michel Belleville <michel.bellevi...@...>
wrote:

> 2009/11/10 Savageman <savagema...@...>
>
> > About .get(0), Firebug keeps telling me: "$(el).parents("div").get
> > (0).addClass is not a function"
>
> Sorry, I tested with .eq(0) instead of .get(0) which returns the pure DOM
> element instead of a jQuery magic-array wrapping the element.
>
> > I still find strange (that eventually gonna change :D) to add the
> > possibility to match a specified selector in the .parent() method if
> > it only applies to the direct parent... I don't really need all the
> > parents here, so it may be more efficient having a method that stops
> > looping through parents when the one we want is found. I guess I still
> > can use .parent().parent().parent() as I know the <div> should be the
> > third parent, but that would require change in the javacscript if i
> > want to change the HTML structure...
>
> If you don't need all the parents, use .parents('div:first') or
> .parents('div').eq(0) as you've found out it's the jQuery way.
>
> I may even be so bold as to add you might like to try
> .closest()<http://docs.jquery.com/Traversing/closest>which is quite
> handy to find "the closest matching element this included".
>
> Have fun.
>
> Michel Belleville

[Mr Speaker]

BTW, just to be clear: there shouldn't EVER be a reason ever to do: $($
(el).parents('div').get(0)).addClass('blah')

You'd just be getting all the parent divs, asking for their actual DOM
references (for no reason) then re-wrapping them into jQuery objects
before adding classes to them!

On Nov 11, 1:12 am, Savageman <savagema...@...> wrote:

> Maybe $($(el).parents('div').get(0)).addClass() ? :d (ahah, what ugly
> syntax :d)
>
> Anyway thanks, topic solved! ;)
>
> On 10 nov, 15:04, Michel Belleville <michel.bellevi...@...>
> wrote:
>
> > 2009/11/10 Savageman <savagema...@...>
>
> > > About .get(0), Firebug keeps telling me: "$(el).parents("div").get
> > > (0).addClass is not a function"
>
> > Sorry, I tested with .eq(0) instead of .get(0) which returns the pure DOM
> > element instead of a jQuery magic-array wrapping the element.
>
> > > I still find strange (that eventually gonna change :D) to add the
> > > possibility to match a specified selector in the .parent() method if
> > > it only applies to the direct parent... I don't really need all the
> > > parents here, so it may be more efficient having a method that stops
> > > looping through parents when the one we want is found. I guess I still
> > > can use .parent().parent().parent() as I know the <div> should be the
> > > third parent, but that would require change in the javacscript if i
> > > want to change the HTML structure...
>
> > If you don't need all the parents, use .parents('div:first') or
> > .parents('div').eq(0) as you've found out it's the jQuery way.
>
> > I may even be so bold as to add you might like to try
> > .closest()<http://docs.jquery.com/Traversing/closest>which is quite
> > handy to find "the closest matching element this included".
>
> > Have fun.
>
> > Michel Belleville
>
>

[Savageman-2]

It was a joke! :d Mootools provides access directly to all the Element
methods via the prototype and you never have to retrieve the dom
instance with $. It's just fun to think about it.

On 11 nov, 04:11, Mr Speaker <mrspea...@...> wrote:

> BTW, just to be clear: there shouldn't EVER be a reason ever to do: $($
> (el).parents('div').get(0)).addClass('blah')
>
> You'd just be getting all the parent divs, asking for their actual DOM
> references (for no reason) then re-wrapping them into jQuery objects
> before adding classes to them!
>
> On Nov 11, 1:12 am, Savageman <savagema...@...> wrote:
>
>
>
> > Maybe $($(el).parents('div').get(0)).addClass() ? :d (ahah, what ugly
> > syntax :d)
>
> > Anyway thanks, topic solved! ;)
>
> > On 10 nov, 15:04, Michel Belleville <michel.bellevi...@...>
> > wrote:
>
> > > 2009/11/10 Savageman <savagema...@...>
>
> > > > About .get(0), Firebug keeps telling me: "$(el).parents("div").get
> > > > (0).addClass is not a function"
>
> > > Sorry, I tested with .eq(0) instead of .get(0) which returns the pure DOM
> > > element instead of a jQuery magic-array wrapping the element.
>
> > > > I still find strange (that eventually gonna change :D) to add the
> > > > possibility to match a specified selector in the .parent() method if
> > > > it only applies to the direct parent... I don't really need all the
> > > > parents here, so it may be more efficient having a method that stops
> > > > looping through parents when the one we want is found. I guess I still
> > > > can use .parent().parent().parent() as I know the <div> should be the
> > > > third parent, but that would require change in the javacscript if i
> > > > want to change the HTML structure...
>
> > > If you don't need all the parents, use .parents('div:first') or
> > > .parents('div').eq(0) as you've found out it's the jQuery way.
>
> > > I may even be so bold as to add you might like to try
> > > .closest()<http://docs.jquery.com/Traversing/closest>which is quite
> > > handy to find "the closest matching element this included".
>
> > > Have fun.
>
> > > Michel Belleville