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">
<h2>Device Name</h2>
<ul>
<li>
<span class="collapse_device_span">
<a class="collapse_device">-</a>
<a id="new-link">New 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">
<h2>Device Name</h2>
<ul>
<li><span class="collapse_device_span"><a 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
