CODEWITHSUNDEEP
javascriptjquery
Keith Power
Keith Power

Reputation: 14141

jQuery set class to inner div

I am trying to set a class of radio-checked to a div and all previous divs on mouse over and remove on mouse out. The trouble is that it sets to the 'a' tag surrounding each of the div's.

Is there a way to set to inner div? 

 $(function() {
    $('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.addClass('radio-checked').prevAll().addClass('radio-checked');
            $self.nextAll().removeClass('radio-checked');
    }).live ( "mouseout", function() { // Handles the mouseout
            $(this).removeClass('radio').prevAll().removeClass('radio');
    });
});   

  <div class="voteGroup">
       <input type="radio" id="price_0" value="1" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
              <div class="radio"></div>
       </a>
       <input type="radio" id="price_1" value="2" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
              <div class="radio"></div></a>
       <input type="radio" id="price_2" value="3" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio"></div>
       </a>
       <input type="radio" id="price_3" value="4" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio"></div>
       </a>
       <input type="radio" id="price_4" value="5" name="price" style="display: none;" class="radio-checked" checked="checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio-checked"></div>
       </a>
   </div>

Upvotes: 0

Views: 566

Answers (2)

Andrei
Andrei

Reputation: 56688

$(function() {
    $('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.prevAll().andSelf().find('div').addClass('radio-checked');
            $self.nextAll().find('div').removeClass('radio-checked');
    }).live ( "mouseout", function() { // Handles the mouseout
            $(this).prevAll().andSelf().find('div').removeClass('radio-checked');
    });
});

By the way, live is deprecated in latest versions of jQuery - use on instead.

Update Here is the version that uses on:

$(function() {
    $('.radio-fx').on("mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.prevAll().andSelf().find('div').addClass('radio-checked');
            $self.nextAll().find('div').removeClass('radio-checked');
    }).on("mouseout", function() { // Handles the mouseout
            $(this).prevAll().andSelf().find('div').removeClass('radio-checked');
    });
});

jsFiddle sample.

Upvotes: 2

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

Try this one: 

$self.prevAll().andSelf().children('div').addClass('radio-checked');

It looks for the children of the previous elements.

The other lines should be:

$self.nextAll().children('div').removeClass('radio-checked'); 

$(this).prevAll().andSelf().children('div').removeClass('radio');

Upvotes: 2

Related Questions