Groupe li en ul basé sur le tiret ‘-‘

J’ai un code déroulant comme ceci:

 Top Folder 2nd Folder 01 ---3rd Folder 01-01 ---3rd Folder 01-02 ------4th Folder 01-02-01 ---------5th Folder 01-02-01-01 ---------5th Folder 01-02-01-02 ---------5th Folder 01-02-01-03 ---------5th Folder 01-02-01-04 ---------5th Folder 01-02-01-05 ---3rd Folder 03 ---3rd Folder 04 ---3rd Folder 05 ------5th Folder 01-02-05-01 ------5th Folder 01-02-05-02 ------5th Folder 01-02-05-03 ------5th Folder 01-02-05-04 ------5th Folder 01-02-05-05 ------5th Folder 01-02-05-06 2nd Folder 02 ---3rd Folder 02-01 ---3rd Folder 02-02 ---3rd Folder 02-03 2nd Folder 03 ---3rd Folder 03-01 ---3rd Folder 03-02 ------4th Folder 03-02-01 ------4th Folder 03-02-02  

Et jQuery les convertis en une liste:

  //<![CDATA[ $(window).load(function(){ $(function() { var $yearFilter = $("#Folder"); $yearFilter.find("option").map(function() { var $this = $(this); return $("
  • ").attr("value",$this.attr("value")).text($this.text()).get(); }).appendTo($("
      ").attr({ id: $yearFilter.attr("id"), name: $yearFilter.attr("name") })).parent().replaceAll($yearFilter); }); });//]]>
  • Ce qui me donne ceci:

      
    • Top Folder
    • 2nd Folder 01
    • ---3rd Folder 01-01
    • ---3rd Folder 01-02
    • ------4th Folder 01-02-01
    • ---------5th Folder 01-02-01-01
    • ---------5th Folder 01-02-01-02
    • ---------5th Folder 01-02-01-03
    • ---------5th Folder 01-02-01-04
    • ---------5th Folder 01-02-01-05
    • ---3rd Folder 03
    • ---3rd Folder 04
    • ---3rd Folder 05
    • ------5th Folder 01-02-05-01
    • ------5th Folder 01-02-05-02
    • ------5th Folder 01-02-05-03
    • ------5th Folder 01-02-05-04
    • ------5th Folder 01-02-05-05
    • ------5th Folder 01-02-05-06
    • 2nd Folder 02
    • ---3rd Folder 02-01
    • ---3rd Folder 02-02
    • ---3rd Folder 02-03
    • 2nd Folder 03
    • ---3rd Folder 03-01
    • ---3rd Folder 03-02
    • ------4th Folder 03-02-01
    • ------4th Folder 03-02-02

    Cependant, ce que je veux réaliser est:

      
    • Top Folder
    • 2nd Folder 01
      • 3rd Folder 01-01
      • 3rd Folder 01-02
        • 4th Folder 01-02-01
          • 5th Folder 01-02-01-01
          • 5th Folder 01-02-01-02
          • 5th Folder 01-02-01-03
          • 5th Folder 01-02-01-04
          • 5th Folder 01-02-01-05
      • 3rd Folder 03
      • 3rd Folder 04
      • 3rd Folder 05
        • 5th Folder 01-02-05-01
        • 5th Folder 01-02-05-02
        • 5th Folder 01-02-05-03
        • 5th Folder 01-02-05-04
        • 5th Folder 01-02-05-05
        • 5th Folder 01-02-05-06
    • 2nd Folder 02
      • 3rd Folder 02-01
      • 3rd Folder 02-02
      • 3rd Folder 02-03
    • 2nd Folder 03
      • 3rd Folder 03-01
      • 3rd Folder 03-02
        • 4th Folder 03-02-01
        • 4th Folder 03-02-02

    Je me demande donc s’il est possible de regrouper tous les 2e, 3e, etc. niveaux dans un groupe ul basé sur le tiret ‘-‘. Ou dois-je donner à chaque li une classe puis un groupe à partir de là?

    Oui, vous devriez pouvoir utiliser les tirets, à condition que le niveau soit toujours le nombre de tirets divisé par trois. La clé est d’utiliser une stack. Il est également utile d’avoir une fonction pour compter les tirets.

     // Helper function. function countLeadingChars(str, ch) { for (var i = 0; i < str.length; i++) { if (str.charAt(i) !== ch) { return i; } } return str.length; } var stack = []; $('#Folder').children().each(function() { var $option = $(this); var text = $option.text(); // Count the dashes. var dashes = countLeadingChars(text, '-'); // Level is # of dashes divided by 3. var level = dashes / 3; // Remove anything in the stack beyond the current level. // This will cause new 
      s to get created when higher // levels are encountered again. if (stack.length > (level + 1)) { stack.length = level + 1; } // Get the
      for the level, creating it if it doesn't exist. var $ul = stack[level]; if (!$ul) { $ul = $('
        '); stack[level] = $ul; // Add the
        to the last
      • of the parent
          . if (level > 0) { stack[level - 1].children(':last').append($ul); // Add the "class" to the
          . var parentText = $ul.parent().text(); var index = parentText.lastIndexOf(' '); $ul.addClass('something' + parentText.slice(index + 1)); } } // Create the
        • and add it to the
            . $('
          • ' + text.slice(dashes) + '
          • ').appendTo($ul); }); // At this point, stack[0] is the top-most
            .

      Démo en direct sur jsfiddle

      EDIT: Je viens de remarquer que vous vouliez une “classe” sur les éléments

        , j’ai ajouté le code pour cela ci-dessus.

        Nouvelle démo en direct sur jsfiddle

        Voir la balise optgroup et si cela résout votre problème

        http://www.w3schools.com/tags/tag_optgroup.asp