开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜