[jQuery] Re: (this).next problem
Siblings are tags who have the same parent. For example:
foobar.../barfar.../far/foowax.../wax
bar and far are siblings, foo and wax are siblings, far and wax aren't
siblings.
Maybe try this:
$('.collapse_device').click(function() {
$(this).parents('.device_header').next().hide();
});
That will walk up the hierarchy to an element with class device_header, then
find the next sibling of that, which is your device_content.
Hope it helps.
--Erik
On 12/24/07, jody [EMAIL PROTECTED] wrote:
hi all,
I'm new to the list and new to jQuery, so I hope you can bear with me.
I'm having a problem getting a specific div to hide without hiding
similarly classed divs. The HTML looks something like this:
div class=device_header
h2Device Name/h2
ul
lispan class=collapse_device_spana class=collapse_device-/
a/span /li
/ul
/div
div class=device_content
---Device Information---
/div
The jQuery I'd like to use looks like this:
$('.collapse_device').click(function(){
$(this).next('.device_content').hide() });
If I write it as:
$('.collapse_device').click(function(){
$('.device_content').hide() });
That works, but closes all the .device_content classes on the page
and there could be, depending on the view, anywhere from 1-20 or
more .device_content classes on the page.
So, what am I doing wrong with (this).next and/or is there a better
way to do what I'm trying to do? I've read around in the forums here
and tried different methods but none seem to get at this exact
problem. I've deduced that it may be to do with next requiring
siblings--but I can't find clear documentation on just how strictly
jQuery interprets the word sibling--if strictly, e.g. anchors are
only siblings of anchors, then I can see the problem in that an anchor
can't recognize the .device_content div as its sibling. But then I
wonder if I'm thinking too hard about it?
Thanks in advance,
jody
[jQuery] Re: (this).next problem
Hi Jody,
The .next() method only works for *sibling* elements. Let's take a
look at your HTML again, but with another element added and with some
indentation:
div class=device_header
h2Device Name/h2
ul
li
span class=collapse_device_span
a class=collapse_device-/a
a id=new-linkNew Link/a
/span
/li
/ul
/div
div class=device_content
---Device Information---
/div
Now, the new link that I added is the next sibling of the link with
class of collapse_device. The h2 and the ul are siblings of each
other, and div class=device_header is a sibling of div
class=device_content.
So, what you want to do is go up the DOM tree to an ancestor element
of a class=collapse_device; in particular, you want to go up to
div class=device_header. Then you want to go across to the next
element, which is div class=device_content, and hide that. So, it
should look like this:
$('.collapse_device').click(function(){
$(this).parents('device_header').next('.device_content').hide()
});
Hope that helps.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Dec 24, 2007, at 1:56 PM, jody wrote:
hi all,
I'm new to the list and new to jQuery, so I hope you can bear with me.
I'm having a problem getting a specific div to hide without hiding
similarly classed divs. The HTML looks something like this:
div class=device_header
h2Device Name/h2
ul
lispan class=collapse_device_spana class=collapse_device-/
a/span /li
/ul
/div
div class=device_content
---Device Information---
/div
The jQuery I'd like to use looks like this:
$('.collapse_device').click(function(){
$(this).next('.device_content').hide() });
If I write it as:
$('.collapse_device').click(function(){
$('.device_content').hide() });
That works, but closes all the .device_content classes on the page
and there could be, depending on the view, anywhere from 1-20 or
more .device_content classes on the page.
So, what am I doing wrong with (this).next and/or is there a better
way to do what I'm trying to do? I've read around in the forums here
and tried different methods but none seem to get at this exact
problem. I've deduced that it may be to do with next requiring
siblings--but I can't find clear documentation on just how strictly
jQuery interprets the word sibling--if strictly, e.g. anchors are
only siblings of anchors, then I can see the problem in that an anchor
can't recognize the .device_content div as its sibling. But then I
wonder if I'm thinking too hard about it?
Thanks in advance,
jody
[jQuery] Re: (this).next problem
You'll need to do something along the lines of:
$('a.collapse_device').click(function() {
$(this). // this gets the a.collapse_device itself
parent(). // this gets the span
parent(). // this gets the li
parent(). // this gets the ul
parent(). // this gets the div.device_header
next('div.device_content'). // *this* gets the div you're after
hide(); // this hides it
});
It's not that the a only knows about other a's as siblings ... it's
that siblings have to be at the same level in the HTML hierarchy,
which in this case they aren't. Your div.device_content is a sibling
of div.device_header; likewise, your ul is a sibling of your h2. Your
a doesn't in fact have any siblings.
Rebecca
http://blog.rebeccamurphey.com
On Dec 24, 1:56 pm, jody [EMAIL PROTECTED] wrote:
hi all,
I'm new to the list and new to jQuery, so I hope you can bear with me.
I'm having a problem getting a specific div to hide without hiding
similarly classed divs. The HTML looks something like this:
div class=device_header
h2Device Name/h2
ul
lispan class=collapse_device_spana class=collapse_device-/
a/span /li
/ul
/div
div class=device_content
---Device Information---
/div
The jQuery I'd like to use looks like this:
$('.collapse_device').click(function(){
$(this).next('.device_content').hide() });
If I write it as:
$('.collapse_device').click(function(){
$('.device_content').hide() });
That works, but closes all the .device_content classes on the page
and there could be, depending on the view, anywhere from 1-20 or
more .device_content classes on the page.
So, what am I doing wrong with (this).next and/or is there a better
way to do what I'm trying to do? I've read around in the forums here
and tried different methods but none seem to get at this exact
problem. I've deduced that it may be to do with next requiring
siblings--but I can't find clear documentation on just how strictly
jQuery interprets the word sibling--if strictly, e.g. anchors are
only siblings of anchors, then I can see the problem in that an anchor
can't recognize the .device_content div as its sibling. But then I
wonder if I'm thinking too hard about it?
Thanks in advance,
jody
