.next in jQuery is not working
I have the following HTML:
<span class="open_download_link">
<a>Downloads</a>
<img src="layout/download.gif"/>
</span>
<div class="download_box">
<img src="layout/icon_en.png" />
<a target="_blank" href="products/pdf/modules_bp_3230Q_en.pdf">Datasheet download</a>
<img src="layout/pdf.gif" />
<a target="_blank" href="products/pdf/modules_bp_3230Q_en.pdf">pdf, 1.6 MB</a>
</div>
with this jQuery:
$('.open_download_link a, .open_download_link img').click(
function 开发者_开发百科() {
$(this).next('div').slideToggle('slow');
});
I've been trying for hours with sibling, nextAll and other things, but nothing works. I really don't get why! Any ideas for what i could do to make this work?
You're selecting an a
inside the span
. .next()
will just find the img
tag after the link and do stuff with that.
Try this, using parent()
to select the span
and then find the div
after it:
$('.open_download_link a, .open_download_link img').click(function () {
$(this).parent().next('div').slideToggle('slow');
});
There is no next DIV in that tree. You need to go up the tree first.
Try: $(this).parent().next('div').slideToggle('slow');
If you look closely at your HTML, you'll see that there is no <div>
following the link or image. It's a sibling of the parent container, .open_download_link
.
$('.open_download_link a, .open_download_link img').click(function () {
$(this).parent().next('div').slideToggle('slow');
});
The div you are trying to select is not a sibling of the clicable elements. Try this:
$('.open_download_link a, .open_download_link img').click(
function () {
$(this).closest('.open_download_link').next('div').slideToggle('slow');
}
});
Try -
$('.open_download_link a, .open_download_link img').click(
function () {
$(this).parent().next('div').slideToggle('slow');
});
This will move up to the clicked elements parent (the 'open_download_link' span) next
can then be used to find the sibling div of the span element.
Demo - http://jsfiddle.net/CP99R/
精彩评论