jQuery – развернуть Tree View до выбранного уровня узла

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

Например, мы нажали на «Parent d» в «списке категорий», затем разверните «Список представлений деревьев» до уровня «Родительский d», чтобы узнать подробности здесь.

HTML

Category list

При щелчке по любому ли расширять список деревьев до выбранного уровня

 
  • Parent 1
  • Parent 2
  • Parent 3
  • Parent 4
  • Parent c
  • Parent d
  • Parent a
  • Parent b
  • Parent e
  • Parent x

Просмотр дерева

 

Node View

  • Parent 1
  • Parent 2
  • Parent 3
  • Parent 4
  • Parent c
  • Parent d
  • Parent a
  • Parent b
  • Parent e
  • Parent x

JQuery

 //$('#ulCollapse li').hide(); $('ul li').click(function(){ var nodeId = $(this).attr('li-id'); alert(nodeId); }) var $ul = $('ul'); $ul.find('li[parent-id]').each(function() { $ul.find('li[parent-id=' + $(this).attr('li-id') + ']') .wrapAll('
    ') .parent() .appendTo(this) });

DEMO

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

 var $ul = $('ul'); $(document).ready(function() { $ul.find('li[parent-id]').each(function() { $ul.find('li[parent-id=' + $(this).attr('li-id') + ']').wrapAll('
    ').parent().appendTo(this) // not changed its your code still, but I need this only first time, so moved into document ready }); }); $('ul#category li').click(function() { $("#ulCollapse1").html(''); // I have created a new div section $("ul").removeAttr('class'); // remove active classes var nodeId = $(this).attr('id'); arrangeNodes(nodeId); $("#ulCollapse1").html($(".active").parent().clone()); //get the marked elements first parent (which is 'li') $("#ulCollapse").hide(); // hide the main treeview }); function arrangeNodes(item) { $ul.find('li[parent-id=' + item + ']').parent().closest("ul").addClass("active"); // find item and mark the first ul as active (selected) }

    Надежда помогает,

    Я не совсем понимаю, чего вы пытаетесь достичь.

    Но возможно : lt () – это то, что вы ищете

    HTML

     

    Category list

    • Parent 1
    • Parent 2
    • Parent 3
    • Parent 4
    • Parent c
    • Parent d
    • Parent a
    • Parent b
    • Parent e
    • Parent x


    Node View

      • Parent 1
      • Parent 2
      • Parent 3
      • Parent 4
      • Parent c
      • Parent d
      • Parent a
      • Parent b
      • Parent e
      • Parent x

    JS

     $cats = $("#category"); $tree = $("#ulCollapse"); $tree.children().hide(); $cats.on("click", "li", function() { var nodeId = $(this).attr('li-id'); console.info("NODE ID: ", nodeId); $tree.children().hide(); var maxEq = $tree.children("[parent-id='" + nodeId + "']").index(); maxEq < 0 && (maxEq = 0); maxEq++; //LTE since :lte() doesn't exist console.info("MAX EQ: ", maxEq); $tree.children(":lt(" + maxEq + ")").show(); }); 

    FIDDLE ==> https://jsfiddle.net/x45j4fx6/1/