"Attribute Starts With" selector

Question

Good day! I am using the jQuery plugin jstree together with its search feature. It works only for the first "set" of jstree. I used incrementing value of divs and "attribute starts with selector" $('div[id^="jstree"]') (thanks to a stackoverflow user) but it only searches within the first set.

@main(Html(""), nav = "map") {

    <a href="@routes.Tags.tree()"> Tree </a> <br><br> 

    <input type="text" id="plugins4_q" placeholder="Search" class="input"> <br><br>

        @for(i <- 0 until first.size()) {
        <div id="jstree@i" class="jstree">
            <ul>
                <li> <span title="@first.get(i).getNotes()"> @first.get(i).getName() </span>
                    @for(rt <- first.get(i).getRelatedTags()) {
                        @if(rt.getRelationship().equals("child")) {
                            <ul>
                                @multiply(rt)
                            </ul>
                        }
                    }
            </ul>
            @if(controllers.Tags.getPeers(first.get(i)) != null) {
                @for(peers <- controllers.Tags.getPeers(first.get(i))) {
                    <ul>
                        <li> <span title="@peers.getNotes()"> @peers.getName() </span>
                            @for(rt2 <- peers.getRelatedTags()) {
                                @if(rt2.getRelationship().equals("child")) {
                                    <ul>
                                        @multiply(rt2)
                                    </ul>
                                }
                            }
                    </ul>
                }
            }
        </div> <hr>
        }


<script src= '@routes.Assets.at("dist/libs/jquery.js")' type="text/javascript"></script>
<script src= '@routes.Assets.at("dist/jstree.min.js")' type="text/javascript"></script>

<script>
  $(function () {
    // 6 create an instance when the DOM is ready
    $('.jstree').jstree({
          "core" : {
                "animation" : 0,
                "check_callback" : true,
                "themes" : { "stripes" : true }
              },

              "plugins" : [
                            "contextmenu", "dnd", "search",
                            "state", "types", "core", "json_data", "ui", "crrm"
                          ]
    });
    var to = false;
    $('#plugins4_q').keyup(function () {
      if(to) { clearTimeout(to); }
      to = setTimeout(function () {
        var v = $('#plugins4_q').val();
        $('div[id^="jstree"]').jstree(true).search(v);
      }, 250);
    });

  });

  </script>

  }

Please help me figure this out. As far as I know the syntax is correct. Thank you very much!

Answer 1

Using jstree() as a getter might return only 1 instance(first one as in case of any getter methods in jQuery) so try to use a .each() like

$('div[id^="jstree"]').each(function () {
    $(this).jstree(true).search(v);
})

jstree([arg])

If there is an existing instance and arg is not a string the instance itself is returned (similar to $.jstree.reference).