Alternativa ao jQuery BEFORE/AFTER (está fechando tag sozinho)

[Maykel-ctba 233]

Fala galera!

 

Tenho a seguinte estrutura HTML:

<nav>
    <ul>
    	<li><a href="/institucional" title="Institucional">Institucional</a></li>
        <li><a href="/restaurantes" title="Restaurantes">Restaurantes</a></li>
        <li><a href="/produtos" title="Produtos">Produtos</a></li>
    	<li><a href="/solucoes" title="Soluções">Soluções</a></li>
        <li><a href="/fique-por-dentro" title="Fique por dentro">Fique por dentro</a></li>
        <li><a href="/contatos" title="Contatos">Contatos</a></li>
    </ul>
</nav>

Preciso dividir esse menu em 2, porém sem alterar o HTML da pagina original. Pensei em Javascript ou CSS.

 

Como em CSS, ninguem respondeu meu tópico, acredito que Javascript seja a solução mais viável (se algum moderador ver isso, pode remover aquele tópico).

 

Bom, fiz a lógica abaixo:

function divideMenu(menu)
{
    // * Cria as variáveis
    var numeroDivisao = $(menu).length/2;
    var contaItem = 0;
    
    // * Inicia a divisão do menu. Insere algo antes
    $(menu + ":first-child").before("<div>");	

    // * Aqui entra o laço, para cada LI...
    for (i = 0; i < $(menu).length; i++)
    {
        // * Adiciona um ao contador
        contaItem++; 
        
        // * Se o contador atual for igual ao numero da divisão
        if(contaItem == numeroDivisao) 
        {
            // * Pode quebrar a div e criar outra
            $(menu + ":nth-child(" + contaItem + ")").after('</div><div>');
        }
    }
    
    // * Fecha aqui
    $(menu+":last-child").after("</div>");
}

Poréeeeem, o before/after estão fechando a tag automaticamente.

 

Ao imprimir, o resultado é este:

<nav>
	<ul>
    	<div></div>
            <li><a href="/institucional" title="Institucional">Institucional</a></li>
            <li><a href="/restaurantes" title="Restaurantes">Restaurantes</a></li>
        <div></div>
            <li><a href="/produtos" title="Produtos">Produtos</a></li>
            <li><a href="/solucoes" title="Soluções">Soluções</a></li>
            <li><a href="/fique-por-dentro" title="Fique por dentro">Fique por dentro</a></li>
            <li><a href="/contatos" title="Contatos">Contatos</a></li>
    </ul>
</nav>

E o resultado que eu esperaria era este:

<nav>
    <ul>
        <div>
            <li><a href="/institucional" title="Institucional">Institucional</a></li>
            <li><a href="/restaurantes" title="Restaurantes">Restaurantes</a></li>
            <li><a href="/produtos" title="Produtos">Produtos</a></li>
        </div>
        <div>
            <li><a href="/solucoes" title="Soluções">Soluções</a></li>
            <li><a href="/fique-por-dentro" title="Fique por dentro">Fique por dentro</a></li>
            <li><a href="/contatos" title="Contatos">Contatos</a></li>
        </div>
    </ul>
</nav>

Qual seria a melhor alternativa a estes recursos para eu atingir o resultado esperado?

[William Bruno 1501]

O que vc quer então, está mais para um .wrap()

[Maykel-ctba 233]

Boa @William!

 

O código ficou ridiculamente menor com o .wrapAll, haha

function divideMenu(menu)
{
	var numeroDivisao = $(menu).length/2;
			
	for(i = 0; i < $(menu).length; i += numeroDivisao)
	{
		$(menu).slice(i, i + numeroDivisao).wrapAll("<div></div>");
	}
}