¿Hay una manera de añadir automáticamente clases de listas de varios niveles con jQuery?
-
02-10-2019 - |
Pregunta
Tengo unas listas de varios niveles como esto:
<ul>
<li>Item 1
<ul>
<li>Item 1's 1st Child
<ul>
<li>Item 1's 1st Grandchild
<ul>
<li>Item 1's Grand Grandchild</li>
</ul>
</li>
<li>Item 1's 2nd Grandchild</li>
<li>Item 1's 3rd Grandchild</li>
</ul>
</li>
<li>Item 1's 2nd Child</li>
<li>Item 1's 3rd Child</li>
</ul>
</li>
<li>Item 2</li>
</ul>
quiero para cada li
tener 'nivel' de clase en función de sus posiciones. El resultado sería la siguiente:
<ul>
<li class="level-1">Item 1
<ul>
<li class="level-2">Item 1's 1st Child
<ul>
<li class="level-3">Item 1's 1st Grandchild
<ul>
<li class="level-4">Item 1's Grand Grandchild</li>
</ul>
</li>
<li class="level-3">Item 1's 2nd Grandchild</li>
<li class="level-3">Item 1's 3rd Grandchild</li>
</ul>
</li>
<li class="level-2">Item 1's 2nd Child</li>
<li class="level-2">Item 1's 3rd Child</li>
</ul>
</li>
<li class="level-1">Item 2</li>
</ul>
¿Hay una manera de lograr esto con jQuery?
Muchas gracias por su atención.
Solución
Creo que esto es una solución genérica:
var current = $('ul:first');
var depth = 1;
while (current.length) {
current = current.children('li').addClass('level-' + depth++).children('ul');
};
Otros consejos
No es la más rápida debido a recorridos DOM, pero que podría hacerlo con tan poco como:
$("li").each(function() {
$(this).addClass("level-" + ($(this).parents("li").length+1));
});
Suponiendo que sólo tiene 4 niveles de listas
$("ul > li").addClass("level-1");
$("li.level-1 > ul > li").addClass("level-2");
$("li.level-2 > ul > li").addClass("level-3");
$("li.level-3 > ul > li").addClass("level-4");
Tal vez hay una manera más programática de hacer esto y teniendo en cuenta la profundidad arbitraria, pero esto fue rápido.
Voy a jugar ... siempre se puede hacer que sea recursiva:)
$(function() {
addLevel($('ul:first'));
});
function addLevel($ul, level) {
( ! level ) ? level = 1 : level += 1;
$ul.children('li').each(function() {
$(this).addClass('level-' + level);
$(this).children('ul').each(function() { addLevel($(this), level) });
});
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow