Binding click function on each div JQuery

Question

I need to bind the click function on each div of this ordered list in order to make hide/show an image on each imgXX div, I'm newbie with 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);
              }
   });
});

So what is giving you grief? Umm... ($(this).find('img').is(':visible').length is not correct, I think. is() gives you a true false. Applying length to it might be weird. — Sidharth Panwar
– Sidharth Panwar, Commented Sep 8, 2010 at 5:59
Note that you are binding the click event on the nested div elements, so they might fire twice. You may want to use $('div.img') or $('div.star') to single out one set of div elements. Also, .each(function(){ $(this).click(...); }) can be shortened to just .click(...) as it applies the event to all elements in the collection. — Guffa
– Guffa, Commented Sep 8, 2010 at 6:12

Sidharth Panwar · Accepted Answer · 2010-09-08 06:03:18Z

7

Try this:

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

answered Sep 8, 2010 at 6:03

Sidharth Panwar

4,6646 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2010-09-08 06:07:23Z

5

The is method returns a boolean. Use:

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

or:

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

answered Sep 8, 2010 at 6:07

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Vikash · Accepted Answer · 2010-09-08 06:05:04Z

1

Unlike the other filtering and traversal methods, .is() does not create a new jQuery object. Instead, it allows us to test the contents of a jQuery object without modification.

Source : http://api.jquery.com/is/

So, you can not use length on it as it returns a boolean value. Remove 'length' and it should work.

answered Sep 8, 2010 at 6:05

Vikash

9992 gold badges9 silver badges28 bronze badges

Comments

Newtang · Accepted Answer · 2010-09-08 06:13:21Z

0

I don't think you necessarily need the each.

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

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

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

});

answered Sep 8, 2010 at 6:13

Newtang

6,59411 gold badges54 silver badges72 bronze badges

Comments

Dustin Laine · Accepted Answer · 2010-09-08 06:14:11Z

0

Not sure about the nesting of the divs, but since you are requesting to only fade the img I am assuming that the .star div is visible and clickable. The function below is a bit more efficient as I am using children instead of find which is recursive. Other than the selectors this should work for you.

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

answered Sep 8, 2010 at 6:14

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

Collectives™ on Stack Overflow

Binding click function on each div JQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related