How To Catch Up A Html Element With Same Class Which Is Under Different Parent Using Jquery?

My markup is as follows:

Quick View

Solution 1:

$('.quickview-btn').on('click',function(){
 var pid = $(this).closest('.item').next('.item').find('.quickview-btn').data('pid');
})

Demo ---->http://jsfiddle.net/qSe6t/4/

Solution 2:

Try

  $('li.item').closest('.item').find('.quickview-btn').data('pid');

Solution 3:

For direct access on load you can use this way. This is not recommended but one of the ways.

$("li:nth-child(2) .quickview-btn").data('pid');

Solution 4:

Try the following:

$('.quickview-btn').on('click',function(){
    var pid = $(this).parent().next().find('.quickview-btn').attr('data-pid');
});

Solution 5:

You could simplify your code in addition to using the proper selectors, as follows:

$('li:first-child').find('.quickview-btn').on('click', function () {
    var nextData = $(this).parent().next().children('.quickview-btn').data('pid');
    console.log(nextData);
});

Demo

Share