Binding función de clic en cada div jQuery

Question

tengo que obligar a la función de clic en cada div de esta lista ordenada con el fin de hacer que ocultar/novato mostrar una imagen en cada div imgXX, estoy con jQuery

<ol id='selectable'> 
<li class="ui-state-default"> 
    <div id="img01" class="img"> 
     <div id="star01" class="star"> 
      <img src="../ima/star.png" height="30px"/> 
     </div> 
    </div> 
</li> 
<li class="ui-state-default"> 
    <div id="img02" class="img"> 
     <div id="star02" class="star"> 
      <img src="../ima/star.png" height="30px"/> 
     </div> 
    </div> 
</li> 
</ol> 

jQuery

$('div').each(function(){ 
    $(this).click(function(){ 
      if($(this).find('img').is(':visible').length){ 
        $(this).find('img').fadeOut(700); 
      } 
      else{ 
        $(this).find('img').fadeIn(700); 
       } 
    }); 
}); 

Answer 1

El método is devuelve un valor booleano. Uso:

if($(this).find('img').is(':visible')) 

o:

if($(this).find('img:visible').length) 

Answer 2

Prueba esto:

$('div').each(function(){ 
    $(this).click(function(){ 
      if($(this).find('img').is(':visible')){ 
        $(this).find('img').fadeOut(700); 
      } 
      else{ 
        $(this).find('img').fadeIn(700); 
       } 
    }); 
}); 

Answer 3

A diferencia de la otros métodos de filtrado y transversal, .is() no crea un nuevo objeto jQuery. En cambio, nos permite probar el contenido de un objeto jQuery sin modificaciones.

• Fuente: http://api.jquery.com/is/

Por lo tanto, no se puede utilizar extensamente sobre él, ya que devuelve un valor booleano. Eliminar 'longitud' y debería funcionar.

Answer 4

no creo que necesariamente se necesita el cada uno.

$('div').click(function(){ 

    var img = $(this).find('img'); 

    if($(img).is(':visible')){ 
    $(img).fadeOut(700); 
    } 

}); 

Answer 5

No estoy seguro sobre el anidamiento de los divs, pero ya que está solicitando a la única desvanecerse img Estoy asumiendo que el .star div es visible y puede hacer clic. La función siguiente es un poco más eficiente ya que estoy usando children en lugar de find que es recursivo. Aparte de los selectores, esto debería funcionar para usted.

$('div.star').click(function() { 
    function() { 
     $(this).children('img').fadeOut(700); 
    }, 
    function() { 
     $(this).children('img').fadeIn(700); 
    } 
});