Динамическое добавление элемента класса в jquery

Question

Я пытаюсь добавить класс 'block' к некоторым элементам li с помощью jquery, но класс не добавляется. Программа предназначена для отображения временных интервалов. если определенное время заблокировано, оно должно быть отключено. программа для создания временных интервалов здесь

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

здесь я получаю заблокированные временные интервалы и передаю эти переменные взгляды.

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

Вот вид, в котором я буду посылать блоки как $ блоков в типе ввода скрытые, а также с указанием временных интервалов

  <?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.'"/>'; 
    } 
} 
?> 

И наконец вот это Jquery добавить класс литий элемент, чтобы заблокировать конкретный элемент LI

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

Вот это HTML вывод, генерируемый

   <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"/> 

Есть ли какие-либо исправления?

Answer 1

Ваших идентификаторов являются недействительными, например, вы li-10:00-11:00, : (точка с запятой) не могут быть использованы для идентификаторов, изменить способ сгенерировать идентификаторы

так как вам нужно времена положить их в данных- * атрибутах тег и использовать функцию .data jQuery для ее извлечения.

Генерация HTML как:

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

В 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