encontrar una clase dentro del mismo div con jquery

Quiero encontrar un class correspondiente a otro class dentro del mismo div.

Estructura HTML:

<div class="main">
  <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://img2.jpg"></a>
                <p class="votenums"> 20 votes.</p>
  </div>

   <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://imgtwo2.jpg"></a>
                <p class="votenums"> 30 votes.</p>
  </div>

El código jQuery es:

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).find(".votenums").text("changed text");
    });
});

Cuando hago clic en img con clase vote Quiero editar la clase votenums, correspondiente al mismo div. es decir, el comportamiento deseado es que cuando se hace clic en la imagen, el texto debe cambiar.

violín está aquí: http://jsfiddle.net/85vMX/1/

preguntado el 05 de febrero de 12 a las 03:02

Tu violín usa mootools no jQuery... -

3 Respuestas

find busca hacia abajo, y .votenums no es descendiente de .vote deberías atravesar hasta el div y luego encuentra al descendiente .votenums

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).closest('div').find(".votenums").text("changed text");
    });
});

Si el div que quieres siempre tendrá class=party puedes buscar por él:
$(this).closest('.party').find(".votenums").text("changed text");
El selector de clases es mejor que el selector de elementos

DEMO de JSFiddle

encontrará:

Descripción: Obtenga los descendientes de cada elemento en el conjunto actual de elementos coincidentes, filtrados por un selector, objeto jQuery o elemento.

más cercano:

Descripción: obtenga el primer elemento que coincida con el selector, comenzando en el elemento actual y progresando a través del árbol DOM.

Respondido 05 Feb 12, 23:02

@ usuario902620. El selector de clases es más eficiente. - gdoron está apoyando a Monica

Un enfoque sencillo y sólido es volver a .party usar closest y luego volver a bajar usando find:

$(".vote").live("click", function(e) {
    e.preventDefault();
    $(this).closest('.party').find('.votenums').text("changed text");
});

Eso le permite cambiar la disposición interna de .party sin romper tu jQuery.

Respondido 05 Feb 12, 07:02

@ usuario902620. usaste mootools y no jquery. ver mi JSFiddle. - gdoron está apoyando a Monica

@ user902620: Funciona bien si cuando el violín usa jQuery: jsfiddle.net/ambigua/85vMX/5 - mu es demasiado corto

A menos que tenga una buena razón para establecer el class y ID de las personas acusadas injustamente llamadas img elemento, mi sugerencia sería optar por un html código. Después de todo, no tiene sentido aplicar .preventDefault() al img ya que no se espera ningún evento, en ese caso esto es lo que <a> la etiqueta se usa para lo siguiente:

<div class="main">
 <div class="party">
  <a id="1001" class="vote" href="#"><img src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg"></a>
  <p class="votenums"> 20 votes.</p>
 </div>
 <div class="party">
  <a id="1002" class="vote" href="#"><img src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg"></a>
  <p class="votenums"> 30 votes.</p>
 </div>
</div>

Observe que configuré una ID para cada enlace anterior, ya que no es una buena idea usar el mismo ID para dos elementos diferentes dentro del mismo documento. IDs debe ser único.

Entonces, su mejor movimiento sería actualizar a jQuery v1.7.x (si aún no lo ha hecho) y usar jQuery .on() en lugar de .live(). Encontrará esto en el sitio de jQuery:

A partir de jQuery 1.7, el .live() El método está en desuso. Usar .on() para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() en preferencia a .live(). ... también hay un buen articulo para leer aqui

Entonces podrías usar una función menos costosa como

$(function() {
 $(".vote").on("click", function(e) {
 e.preventDefault();
 $(this).next('.votenums').text("changed text");
 });
});

Y por último, el CSS también necesitaría un pequeño ajuste.

.vote img{
    height:70px;
    width:70px;   
}

Respondido 05 Feb 12, 09:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.