Question

I have the following html which I use to rate price range:

<li class='voteable-attribute off clearfix' id='attributes_price_range'>
            <label class='primary formField'>Price Range:
            </label>
                    <fieldset id='price_choices'>
        <legend class='offscreen'>Price Range:</legend>
            <p class='offscreen'>Price per person:</p>
        <ul class='clearfix price-0'>
            <li>
                <input type='radio' id='price-1' name='RestaurantsPriceRange2' value='1'>               <label for='price-1' class='offscreen'>
                    Cheap, Under $10
                </label>
            </li>
            <li>
                <input type='radio' id='price-2' name='RestaurantsPriceRange2' value='2'>               <label for='price-2' class='offscreen'>
                    Moderate, $11 - $30
                </label>
            </li>
            <li>
                <input type='radio' id='price-3' name='RestaurantsPriceRange2' value='3'>               <label for='price-3' class='offscreen'>
                    Spendy, $31 - $60
                </label>
            </li>
            <li>
                <input type='radio' id='price-4' name='RestaurantsPriceRange2' value='4'>               <label for='price-4' class='offscreen'>
                    Splurge, Over $61
                </label>
            </li>
        </ul>
    </fieldset>
            <span class='no-js-hidden pseudoLink' id='price_tip' title='' style='cursor: auto;'>Price per person:</span>
        <span class='no-js-hidden' id='price_range'>Roll over price, then click to vote </span>
</li>

These are my js code where we mouse over to any li within ul the ul class which by default price-0 will be replaced with id of current selected li.

Here is my javascript. I want the class price-0 of the ul to change to the id of the li that you hover over.

$('#price_choices ul').mouseover(function(){
        var val = $(this).find('li input').attr('value');

        $(this).removeClass(/price-[a-zA-Z0-9_]*/g, '');
        $(this).addClass('price-'+val+'');

    });

How can I replace the classname with the id specified? My current code simply adds the class and I end up with a list of classes that looks like this price-0 price-1 price-2.. etc

Answer 1

try:

$('#price_choices ul > li').mouseover(function(){
   var $li = $(this),
   val = $li.find('input').val();
    //alert(val);
   var preClass=  $li.parents("ul").attr("class"); 
   $li.parents("ul").removeClass(preClass);
   $li.parents("ul").addClass('price-'+val);
});

Demo:: jsFiddle