Adding a class to li element dynamically using jquery

Question

I am trying to add a class 'block' to certain li elements using jquery but the class is not getting added. The program is to show the time slots. if the certain time is blocked then it should be disabled. the program to create the time slots is here

    public function __construct(){
        $this->_meta['instance']='time';
        $this->_meta['class']='time';
    }

    private function _selectbox($start,$end,$currentTime=false,$id=false,$name=false,$class=false){

        $fromtime=$start;
        $totime= $fromtime + "1";
        $select = '<ul class="'.$class.'">';
        for($i=$start;$i<=$end;$i++){
            while($fromtime<$end){
            $li='<li id="li-'.$fromtime.':00-'.$totime.':00" class="" style="width:24%;"><input type="radio"  id="radio-'.$fromtime.':00-'.$totime.':00" name="'.$name.'" value="'.$fromtime.':00-'.$totime.':00"/>'.$fromtime.':00-'.$totime.':00</li>';
            $select.=$li;
            $fromtime=$fromtime + "1";
            $totime=$totime + "1";

            }
        }

        return $select;
    } 
        public function show($meta=array()){        
        $this->_meta=array_merge($this->_meta,$meta);   
        return $this->_hour();
    }

here i'm getting the blocked time slots and passing those variables to views.

    $date = $_SESSION['date'];
    $blocks = $block->getBlocksPerDay(date('d',strtotime($date)),
                                      date('m',strtotime($date)),
                                      date('Y',strtotime($date)));

    $this->setData('blocks',$blocks);
    $this->setData('date',$date);


         public function getBlocksPerDay($day,$month,$year){
    $connection = db::factory('mysql');

    $sql = 'select *  from blocks WHERE date LIKE "'.$year.'-'.$month.'-'.$day.'%"';

    return $connection->getArray($sql);
}

Here is the view in which i'm sending the blocks as $blocks in input type hidden and also showing the time slots

          <?php echo $time->show(array('instance'=>'from'));?>

            <?php 
if(sizeof($blocks)>0){
    foreach($blocks as $block){
        $time_from=explode(":",$block['time_from']);
        $time_from_part1=$time_from[0];
        $time_from_part2=$time_from[1];
        $time_to=explode(":",$block['time_to']);
        $time_to_part1=$time_to['0'];
        $time_to_part2=$time_to['1'];
        //echo $time_from_part1':'$time_from_part2'-'$time_to_part1':'$time_to_part2;
        echo '<input type="hidden" class="blocks" disabled="disabled" value="'.$time_from_part1.':'.$time_from_part2.'-'.$time_to_part1.':'.$time_to_part2.'"/>';
    }
}
?>

And Lastly here is the Jquery to add the class to li element to block the particular li element

           $(document).ready(function() {   
             function setBlocks(){ 
    var blocks = $('.blocks');
    $.each(blocks,function(index,value){
        $('#li-'+$(value).val()).addClass('block');
        //$('#li-'+$(value).val()).find('input').remove();
    });
}
setBlocks();
        });

Here is the HTML Output Generated

                <ul class="time"><li id="li-10:00-11:00" class="" style="width:24%;"><input type="radio"  id="radio-10:00-11:00" name="from-time-hour" value="10:00-11:00"/>10:00-11:00</li><li id="li-11:00-12:00" class="" style="width:24%;"><input type="radio"  id="radio-11:00-12:00" name="from-time-hour" value="11:00-12:00"/>11:00-12:00</li><li id="li-12:00-13:00" class="" style="width:24%;"><input type="radio"  id="radio-12:00-13:00" name="from-time-hour" value="12:00-13:00"/>12:00-13:00</li><li id="li-13:00-14:00" class="" style="width:24%;"><input type="radio"  id="radio-13:00-14:00" name="from-time-hour" value="13:00-14:00"/>13:00-14:00</li><li id="li-14:00-15:00" class="" style="width:24%;"><input type="radio"  id="radio-14:00-15:00" name="from-time-hour" value="14:00-15:00"/>14:00-15:00</li><li id="li-15:00-16:00" class="" style="width:24%;"><input type="radio"  id="radio-15:00-16:00" name="from-time-hour" value="15:00-16:00"/>15:00-16:00</li><li id="li-16:00-17:00" class="" style="width:24%;"><input type="radio"  id="radio-16:00-17:00" name="from-time-hour" value="16:00-17:00"/>16:00-17:00</li><li id="li-17:00-18:00" class="" style="width:24%;"><input type="radio"  id="radio-17:00-18:00" name="from-time-hour" value="17:00-18:00"/>17:00-18:00</li>

              <input type="hidden" class="blocks" disabled="disabled" value="10:00-11:00"/>

Is there any fix???

Answer 1

Your id's are invalid, for instance you have li-10:00-11:00 , : (semicolons) cant be used for id's, change the way you generate your id's

since you need the times put them in the data-* attributes of the tag, and use jQuery's .data function to retrieve it.

Generate HTML Like:

<li id="someUniqueId" data-time="10:00-11:00" class="" style="width:24%;">

In Javascript

var time = jQuery("#someUniqueId").data("time");
//Now "time" will contain "10:00-11:00"
console.log(time);
//console.log will display time in console