¿Cómo poner al día un elemento html con la misma clase que está bajo diferente padre usando jQuery?

Mi marcado es el siguiente:

  • Quick View
    xyzxyz

    22" Syncmaster LCD Monitor

    something
  • Quick View
    abcabc

    Another Product

    something
  • Quiero obtener el valor data-pid del segundo quickview-btn div al hacer clic en el primer quickview-btn div.

    .parent() los .parent() , .next() y .closest() en jQuery, pero no puedo obtenerlo.

    Lo intenté:

     $(this).parent('.item').next('.item').next('.quickview-btn').data('pid'); $(this).parent('.item').next('.item').child('.quickview-btn').data('pid'); $(this).parent('.item').next('.item').closest('.quickview-btn').data('pid'); 

    pero ninguno de ellos funcionó para mí.

     $(this).parent('.item').next('.item').hide(); //this works 

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

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

    Tratar

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

    Para el acceso directo en la carga puede usar de esta manera. Esto no es recomendable, pero una de las formas.

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

    Pruebe lo siguiente:

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

    Puede simplificar su código además de usar los selectores adecuados, de la siguiente manera:

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

    Manifestación