[SOLUCIONADO] Mover link a una lista creada.

[jeremiselxi]

Buenas noches a todos.

Esperando se encuentren bien, vengo con mi problema.

Me han pasado este trozo de código HTML de una pagina:

Código HTML:

...
<div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-inline clearfix drupalalsur">
<div class="field-label">Tags:&nbsp;</div>
<div class="field-items">
<div class="field-item even" rel="dc:subject">
 <a href="/sitio2/tags/etiqueta-uno" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Uno</a>
</div>
<div class="field-item odd" rel="dc:subject">
<a href="/sitio2/tags/etiqueta-dos" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Dos</a>
</div><div class="field-item even" rel="dc:subject">
<a href="/sitio2/tags/etiqueta-tres" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Tres</a>
</div></div></div>
</br>
...
 

Entonces aquí viene la problemática, me han pedido que cree automáticamente una etiqueta "ul" dentro de la clase llamada "field-label" dentro de la clase "drupalalsur".

Esto lo he logrado con este código:

Código Javascript:

$('<ul class="list-inline"></ul>').insertAfter($(".drupalalsur .field-label"));
 

Y que todos los link contenidos dentro de las dos clases mencionada, se agreguen con la etiqueta li, y esto es lo que no he podido hacer.

Solo he logrado tomar los 3 link y meterlos dentro de la etiqueta ul, pero no logro colocar las etiquetas li antes y despues de cada link.

Código Javascript:

$(".drupalalsur ul").prepend($('.drupalalsur a'));
 

al final al inspeccionar el código html queda de esta manera.

Código HTML:

<ul class="list-inline">
<a href="/sitio2/tags/etiqueta-uno" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Uno</a>
<a href="/sitio2/tags/etiqueta-dos" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Dos</a>
<a href="/sitio2/tags/etiqueta-tres" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Tres</a>
</ul>
 

y necesito que salga así

Código HTML:

<ul class="list-inline">
<li><a href="/sitio2/tags/etiqueta-uno" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Uno</a></li>
<li><a href="/sitio2/tags/etiqueta-dos" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Dos</a></li>
<li><a href="/sitio2/tags/etiqueta-tres" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Tres</a></li>
</ul>
 

Espero haber explicado bien esto.
Saludos y Dios les bendiga a todos.

[AngelKrak]

The hice algo asi, aun que no quedo bien :(

http://codepen.io/AngelKrak/pen/bZrjbR

[jeremiselxi]

Iniciado por AngelKrak

The hice algo asi, aun que no quedo bien :(

http://codepen.io/AngelKrak/pen/bZrjbR

Excelente.

Gracias a ti, ya pude solucionarlo.

Aquí dejo el código

Código Javascript:

//Creamos una variable pasandole el html de la clase .list-inline
var li = $(".list-inline").html();
//creamos una variable reemplazando todos los <a de manera global (gi) por el <li><a
var res = li.replace(/<a/gi, "<li><a");
//Creamos otra variable reemplazando todos los a> de manera global (gi) por el a></li>
var res2 = res.replace(/a>/gi, "a></li>");
//finalmente, cambiamos el html de la clase .list-inline por el de la variable res2.
$(".list-inline").html(res2);
 

Muchísimas gracias.