Error en la Navegación del DOM con Jquery, que estoy haciendo mal?

Hola a todos! espero que puedan darme una mano...

Mi problema lo tengo en la siguiente linea de JS

Código Javascript :

[b]$(this).parentsUntil('.compra').find('.detalle-compra').addClass('detalle-compra-visible');[/b]

Todo el HTML posee PHP incrustado que se encarga de cargar todas las compras que realizo un usuario y mostrar un detalle resumido, al presionar sobre mas detalles, debería mostrarse mas información sobre esa compra.

El DIV con clase COMPRA se repite según las cantidades de compras que realizo el usuario dentro de el tendremos el DIV con clase DETALLE-COMPRA y el DIV con clase RESUMEN-COMPRA, bien ahora lo que quiero es que al presionar sobre el DIV con clase MAS-DETALLES llegue el PARENT con clase COMPRA y una vez ahi BUSQUE el DIV con clase DETALLE-COMPRA y le agregue la clase DETALLE-COMPRA-VISIBLE.

Llego al PARENT con clase COMPRA pero luego el FIND() no encuentra el DIV con la clase DETALLE-COMPRA y no entiendo porque. probe con child() y tampoco

Tengo algo similar funcionando en otra web, de hecho he estado mirándola nuevamente pero no encuentro donde esta mi error. Espero que logren entenderme trate de ser lo mas claro posible, pero por favor si necesitan que les de mas información haganmelo saber.

Código CSS :

.detalle-compra {display:none;}
.detalle-compra-visible {display:block}

Código HTML :

<div class="compra">
     <div class="detalle-compra">
          <div class="producto">PRODUCTO 1</div>
          <div class="producto">PRODUCTO 2</div>
          <div class="producto">PRODUCTO 3</div>
          <div class="producto">PRODUCTO 4</div>
     </div>
     <div class="resumen-compra">
          <div class="mas-detalles">+</div>
     </div>
</div

Código Javascript :

$(".mas-detalles").click(function(){
     $(this).parentsUntil('.compra').find('.detalle-compra').addClass('detalle-compra-visible');
});

Desde ya les agradezco la ayuda que me puedan proporcionar.

Bueno intenta ver que pasa con:

console.log($(this).parentsUntil('.compra').find('.detalle-compra'));


Para ver que pasa. o que es lo que te rae de regreso... yo en lo personal utilizaria:

$(".detalle-compra).removeClass("detalle-compra").addClass("detalle-compra-visible");

Te explico por que no pongo como vos indicas:

$(".detalle-compra).removeClass("detalle-compra").addClass("detalle-compra-visible");

.detalle-compra tantas veces como compras realizo el usuario y si yo pongo lo que vos indicas en esa linea todos los divs con la clase detalle-compra se mostraran.
Es por que parto de mas-detalles, voy hasta el parent compra y busco el detalle-compra, para que únicamente sea ese el que se modifique.

Lo otro lo voy a probar! gracias por tu respuesta.

Vos sabrías indicarme como leo el Log? estoy viendolo pero no logro interpretarlo.

Código Javascript :

$(this).parent().children('.detalle-compra').addClass('detalle-compra-visible');

ó

Código Javascript :

$(this).siblings('.detalle-compra').addClass('detalle-compra-visible');

Nacho,
Hay algo mas que deba tener en cuenta? por que probé las dos opciones que me diste pero sigue sin funcionar.

Si tu estructura es:

- .compra
---- .mas-detalles
---- .detalle-compra
---- .resumen-compra

Si tienes un div con la clase compra y como hijos directos a mas-detalles, detalle-compra y resumen-compra.
Entonces el código debería funcionar.

La primera opción "después de dar click a mas-detalles, seleccionas el elemento padre, <<que es la clase compra>>, y selecciona a su hijo con clase detalle-compra.

La segunda, selecciona a su hermano que tiene como clase detalle-compra.

La estructura es

-- .compra
---- .detalle-compra
---- .resumen-comra
------ .mas-detalles

Te dejo el HTML

Código HTML :

<div class="compra">
     <div class="detalle-compra">
          <div class="producto">PRODUCTO 1</div>
     </div>
     <div class="resumen-compra">
          <div class="mas-detalles">+</div>
     </div>
</div>

Puede ser que sea algo asi? ahora mismo lo voy a probar

Código Javascript :

$(this).parent().siblings('.detalle-compra').addClass('detalle-compra-visible');

NASHO, Funciono de diez!

Esto era lo que debía utilizar.

$(this).parent().siblings('.detalle-compra').addClass('detalle-compra-visible');

Gracias por tu ayuda!

Para ver el console.log.. necesitas tener activadala consola del navegador (aplica en todos los navegadores d eultima generacion ),