jquery复选框树是否支持使用类选择器而不是Id进行程序扩展

Does jquery checkbox tree support the ability to programatically expand using class selectors instead of Id?

本文关键字：Id 程序扩展 选择器 复选框 是否 支持 jquery      更新时间：2023-09-26

我使用的是jquery checkboxtree插件，它工作得很好。在这种情况下，我希望以编程方式扩展某些节点。

我看到我可以通过Id来做，如示例中所示：

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

我希望我可以使用像这样的类名来扩展多个节点

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

但它似乎没有任何作用。有人知道是否有一种方法可以使用类选择器以程序方式扩展或折叠这里的节点吗？

检查这个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) );
    });
});
相关文章：