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