Поддерживает ли дерево ячеек jquery возможность программного расширения с помощью селекторов классов вместо Id?

Question

Я использую jquery checkboxtree plugin, который отлично работает. У меня есть ситуация, когда я хочу программно расширить определенные узлы.

Я вижу, что я могу сделать, Id как в примере:

$('#tabs-5-expand').click(function(){ 
    $('#tree5').checkboxTree('expand', $('#tabs-5-node23')); 
}); 

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

$('#tabs-5-expand').click(function(){ 
    $('#tree5').checkboxTree('expand', $('.bluetabs')); 
}); 

но это Безразлично Кажется, ничего не делает. Кто-нибудь знает, есть ли способ программно расширить или свернуть узлы здесь с помощью селекторов классов?

Answer 1

Check this fiddle и раскомментировать обработчики, по одному. Правильный способ сделать это - перебрать массив элементов . Проверьте комментарии для получения дополнительной информации.

<ul id="tree6"> 
    <li><input type="checkbox" checked><label>Root</label> 
     <ul> 
      <li class="bluetabs"><input type="checkbox"><label>Node 1</label> 
       <ul> 
        <li><input type="checkbox"><label>Node 1.1</label></li> 
       </ul> 
      </li> 
      <li><input type="checkbox" checked><label>Node 2</label> 
       <ul> 
        <li><input type="checkbox"><label>Node 2.1</label></li> 
        <li><input type="checkbox"><label>Node 2.2</label></li> 
        <li class="bluetabs"><input type="checkbox"><label>Node 2.3</label> 
         <ul> 
          <li><input type="checkbox"><label>Node 2.3.1</label></li> 
          <li><input type="checkbox"><label>Node 2.3.2</label></li> 
         </ul> 
        </li> 
        <li><input type="checkbox"><label>Node 2.4</label></li> 
        <li><input type="checkbox"><label>Node 2.5</label></li> 
        <li><input type="checkbox"><label>Node 2.6</label></li> 
       </ul> 
      </li> 
     </ul> 
    </li>   
</ul> 

<button id="test">Press to expand</button> 


$('#tree6').checkboxTree({ 
    initializeChecked: 'expanded', 
    initializeUnchecked: 'collapsed' 
}); 


//If all the bluetabs are collapsed this will work. If you expand one of the blue ones, then it won't work for the other. 
$('#test').click(function() { 
    $('#tree6').checkboxTree('expand', $('.bluetabs')); 
}); 


//This will work regardless 
$('#test').click(function() { 
    $('.bluetabs').each(function() { 
     $('#tree6').checkboxTree('expand', $(this)); 
    }); 
});