How do I programmatically select hidden nodes in a jsTree?

Question

I have a jsTree with checkboxes. Each item in the tree represents a review item that may have the state 'new', 'started', or 'done'. The states are added to the @class of the items.

This is part of the unordered list from which the jsTree is created

<ul>
    <li class="job started" id="j_09f2fbe4-a7ff-4723-af3d-c54d389d6020" start="March 31, 2018" due="April 12">j_09f2fbe4-a7ff-4723-af3d-c54d389d6020
        <ul>
            <li class="pub new" id="p_939519b7-e500-44b7-9be8-d7535d182b94">ANI22 Web Guide<span class="info float-right"> new: 10  started: 0  done: 0</span>
                <ul>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_DEU">DEU </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_FRE">FRE </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_IND">IND </li>
                <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_JPN">JPN     </li>
                <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_KOR">KOR </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_NLT">NLT </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_POR">POR </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_RUS">RUS </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_SPA">SPA </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_ZHS">ZHS </li>
                </ul>
            </li>
            <li class="pub done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3">ANIUSB Matrix Web Guide<span class="info float-right"> new: 0  started: 0  done: 10</span>
                <ul>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_DEU">DEU </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_FRE">FRE </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_ITA">ITA </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_JPN">JPN </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_KOR">KOR </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_NLT">NLT </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_POR">POR </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_RUS">RUS </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_SPA">SPA </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_ZHS">ZHS </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I now want to set the checkboxes of all nodes that have the class '.done'. This code should be triggered by a button in the toolbar and work regardless whether nodes are currently hidden (collapsed) or not. But the collapsed nodes are not visible in the HTML and do not get caught by selecting all items with this class.

function selectDone() {
    $('#joblist').jstree(true).select_node('.done');
}

When the jsTree is collapsed (only showing the top level list items), nothing gets selected and no checkboxes are ticked.

When I expand nodes, they do get selected by the same code.

I don't know how jsTree hides the collapsed items, and I did not find any jsTree method to create a selection based on class and then set their checkbox.

Answer 1

One way to do it would be to get all nodes and loop over them to select the ones which have a class.

function selectNodewithClass(sClass) {
    var oTree = $('#jstree_demo_div').jstree(true);
    var oList = oTree.get_json(null, { flat : true });
    oList.forEach(function (node) {
        if (node.li_attr.class.indexOf(sClass) >= 0) {
            oTree.select_node(node)
        }
    });
};

selectNodewithClass("done");

The get_json method will return all nodes in the tree. The classes assigned to the li tags are available as li_attr in the tree's node data.