jQuery-按类定位下一个元素

Question

I'm tryingto target the next div with class="modal" to display it when i click on the <h4> OR the <div> with class "imgdd".

<li class="itemmenumodal">
    <div class="imgdd"></div>
    <h4>test</h4>                       
    <div class="modal">
        <p>hello there</p>
    </div>
</li>    

I tried this, it works when i click on the <h4> but not for the <div> with class="imgdd" :

$(".itemmenumodal h4,.itemmenumodal div.imgdd").click(function(){
    jQuery(this).next(".modal").bPopup({            
        speed: 350,
        transition: 'slideDown',
        closeClass:'closemodal',
    });                 
})

How can I do this?

Answer 1

.next（）将仅获取下一个元素，因此必须使用.nextAll（）和：first来获取下一个第一个.modal元素

  jQuery(this).nextAll(".modal:first").bPopup({  

Answer 2

This should do the work:

$(".itemmenumodal h4,.itemmenumodal div.imgdd").click(function(){
    $(jQuery(this).siblings(".modal")[0]).bPopup({            
    speed: 350,
    transition: 'slideDown',
    closeClass:'closemodal',
});                 
})

Here is the jsfiddle: http://jsfiddle.net/3PwHK/