CODEWITHSUNDEEP
javascriptjqueryhtml
Kamzz
Kamzz

Reputation: 119

jQuery - Target next element by class

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?

Upvotes: 0

Views: 103

Answers (2)

Amit Joki
Amit Joki

Reputation: 59282

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/

Upvotes: 0

Anton
Anton

Reputation: 32591

.next() will only get the next element therefore you must use .nextAll() and :first to get the next first .modal element

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

Upvotes: 3

Related Questions