[SOLUCIONADO] Seleccionar div correctamente en un for loop

[stormearth]

Hola todos, con este script estoy tratando de cambiar la clase de un botón cuando le dan click. si da click en el puntaje, se "desactivan" los botones vote-up y vote-down.

Código:

<script>
	$(function(){
		$('.puntaje').click(function(){
			$('.vote-up').removeClass("btn-warning")
			$('.vote-down').removeClass("btn-warning")
		})
		$('.vote-up').click(function(){
			$(this).toggleClass("btn-warning")
			$('.vote-down').removeClass("btn-warning")
	});
		$('.vote-down').click(function(){
			$(this).toggleClass("btn-warning")
			$('.vote-up').removeClass("btn-warning")
	});
	});
</script>

El pequeño problema es que estoy usando un for loop de django para mostrar todos los posts, y no se como seleccionar el post en el cual está dando click el usuario en ese momento puesto que el for loop los pone a todos con la misma clase.

Este es el Html:

Código:

{% for post in posts %}
<div class = "control_votos">
<div class = "btn-group-vertical">
	<button type="button" class = "btn btn-default vote-up"> 
	   <span class="glyphicon glyphicon-chevron-up"></span>
	</button>
	<button type="button" class = "btn btn-default puntaje"> 
	  <h2 class = "numero_puntaje"> {{post.0.votos_positivos}} </h2>
	</button>
	<button type="button" class = "btn btn-default vote-down"> 
	    <span class="glyphicon glyphicon-chevron-down"></span>
	</button>
</div>
 {% endfor %}

Soy un poco novato en jquery, y es probable que la solución sea simple. Django crea un div "control votos" por cada post. Y luego tengo un montón de control_votos que efectivamente se cambian las clases cuando les doy click pero que si le doy click a un "vote-up" se apagan todos los "vote-down", si le doy click a un "vote-down" se apagan todos los "vote-up", no solo el del div en el que estoy trabajando.

El error es simple, pero no tengo mucha idea de como solucionarlo.

[andresgarciadev]

no tiene nada que ver django aca... simplemente es jquery
es simple.. envez de usar

Código Javascript:

$('.vote-down').removeClass
 

se mas especifico y usa

Código Javascript:

$(this).next()
o
$(this).prev()
 

esta es una forma de solucionarle... pero hay otras... como seleccionando el padre de $(this) y haciendo un find...

[stormearth]

andresgarciadev gracias por tu respuesta. Ya intenté implementarla pero no me funciona, . Cosas de novato que suelen ser errores simples pero que como no se bien, no puedo verlos.

el script quedó así:

Código:

<script>
	$(function(){
		$('.puntaje').click(function(){
			$(this).prev().removeClass("btn-warning")
			$(this).next().removeClass("btn-warning")
		})
		$('.vote-up').click(function(){
			$(this).toggleClass("btn-warning")
			$(this).next('.vote-down').removeClass("btn-warning")
	});
		$('.vote-down').click(function(){
			$(this).toggleClass("btn-warning")
			$(this).prev('.vote-up').removeClass("btn-warning")
	});
	});
</script>

el Html relevante:

Código:

<div class = "btn-group-vertical">
   <button type="button" class = "btn btn-default vote-up"> 
       <span class="glyphicon glyphicon-chevron-up"></span>
   </button>
   <button type="button" class = "btn btn-default puntaje"> 
	<h2 class = "numero_puntaje"> {{post.0.votos_positivos}} </h2>
   </button>
   <button type="button" class = "btn btn-default vote-down"> 
	<span class="glyphicon glyphicon-chevron-down"></span>
   </button>
</div>

Cuando doy click al botón vote-down no se remueve la clase "btn-warning" del botón vote-up.
Lo que sí funciona es cuando le doy click al puntaje se quitan las clases "btn-warning" de los dos botones vote-up y vote-down.

Se me ocurre algunas formas de darle vuelta al problema, usando dos prev(), seleccionando todo el div contenedor.. pero creo que no sería la forma más efectiva de lograrlo .Gracias por su ayuda.

[andresgarciadev]

lo que pasa es que next() y prev, solo busque en el siguiente y anterior no en "los" siguientes o anteriores
es decir ...
cuando usas

Código Javascript:

next('.vote-down')
 

lo que esta haciendo es seleccionar el siguiente nomas con el ".vote-down" que hacs lo que hace es una validacion... que solo lo selecciona si tiene la clase note-down... es decir para hacerlo de esa forma tendrias que usar .next().next()
creo que si habia otra funcion que buscaba en los siguientes pero horita no recuerdo como era XD

[stormearth]

Ok gracias por tus comments. A la final encontré esta manera de solucionarlo. No se si sea la mejor, por eso la posteo aquí, y si es una buena manera de hacerlo espero que le sirva a alguien:

Código:

<script>
	$(function(){
		$('.puntaje').click(function(){
			$(this).prev().removeClass("btn-warning");
			$(this).next().removeClass("btn-warning");
		})
		$('.vote-up').click(function(){
			$(this).toggleClass("btn-warning");
			var $control = $(this).parent();
			$control.children(".vote-down").removeClass("btn-warning");
			});

		$('.vote-down').click(function(){
			$(this).toggleClass("btn-warning");
			var $control = $(this).parent();
			$control.children(".vote-up").removeClass("btn-warning");
		});
	});
</script>