Nested lists and multiple list.js instances

I have a list with some nested lists inside.

<ul #1>
    <li>Hi</li>
    <li>I'm a</li>
    <li>
            <ul #2>
                    <li>Nested</li>
                    <li>List</li>
            </ul>
    </li>
</ul>

The list items, both nested and top level are dynamic, in that we don’t know how many items you’ll start with. Currently I’m able to sort and search on the top level list with list.js (ul#1), but unable to get the nested lists (ul#2) to work with list.js.

I created a for each statement that should be firing up a new instance of list.js for each of the nested lists:

nestedlist = $(".nested-list-wrapper-div");
$.each(nestedlist, function(index) {
    //Get the id of each wrapper div
    currentWrapperId = this.id;
    //Make a name for the new list object
    listJsObject = 'listJsObject-' + index;

    listJsObject = new List(currentWrapperId, listOptions);
    console.log(listJsObject);
});

In the listOptions I am making sure to specify the correct sort classes and list classes.

If I log listJsObject in the foreach, I see that the correct amount of new listJS objects are created, with properties corresponding to the correct lists.

I’d like to press one button that sorts all the nested lists, but nothing happens.

    <button data-sort="name" class="sort">sort button</button>

Again, I can’t just specify the list.js objects to instantiate or run methods (like some of the examples for multiple lists in github) because the lists are all being created dynamically when the page loads (php) and thus have unpredictable wrapper id’s.

Would appreciate any guidance on this. Does list.js support this kind of behavior? Thanks.

[bilalfastian]

@jonathanbell I don’t have the documentation, however if you can share your test project maybe I can help you on that.

[Velora]

For now as a solution I will hide the existing list structure and populate the container with a new single list of all elements when the search input is selected. Then after the search term is removed and the input looses focus, the initial nested structure will reappear. (Essentially creating a search mode when the input is focused.)