jQueryが内部divにクラスを設定

Question

ラジオチェックのクラスをdivに設定しようとしています。以前のすべてのdivがマウスで上書きされ、マウスで削除されます。問題は、divのそれぞれを囲む 'a'タグに設定されていることです。

内部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> 

Answer 1

$(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'); 
    }); 
}); 

、liveis deprecated in latest versions of jQuery - 代わりに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：

更新ここonを使用するバージョンです。

Answer 2

この方法を試してください。

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

それは、前の要素の子を探します。

他の行は次のようになります。ところで

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

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