Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Mover link a una lista creada.

Estas en el tema de Mover link a una lista creada. en el foro de Jquery en Foros del Web. Buenas noches a todos. Esperando se encuentren bien, vengo con mi problema. Me han pasado este trozo de código HTML de una pagina: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); ...
  #1 (permalink)  
Antiguo 24/07/2016, 22:19
(Desactivado)
 
Fecha de Ingreso: septiembre-2008
Mensajes: 269
Antigüedad: 15 años, 6 meses
Puntos: 22
Mover link a una lista creada.

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:
Ver original
  1. ...
  2. <div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-inline clearfix drupalalsur">
  3. <div class="field-label">Tags:&nbsp;</div>
  4. <div class="field-items">
  5. <div class="field-item even" rel="dc:subject">
  6.  <a href="/sitio2/tags/etiqueta-uno" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Uno</a>
  7. </div>
  8. <div class="field-item odd" rel="dc:subject">
  9. <a href="/sitio2/tags/etiqueta-dos" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Dos</a>
  10. </div><div class="field-item even" rel="dc:subject">
  11. <a href="/sitio2/tags/etiqueta-tres" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Tres</a>
  12. </div></div></div>
  13. </br>
  14. ...

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:
Ver original
  1. $('<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:
Ver original
  1. $(".drupalalsur ul").prepend($('.drupalalsur a'));

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

Código HTML:
Ver original
  1. <ul class="list-inline">
  2. <a href="/sitio2/tags/etiqueta-uno" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Uno</a>
  3. <a href="/sitio2/tags/etiqueta-dos" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Dos</a>
  4. <a href="/sitio2/tags/etiqueta-tres" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Tres</a>
  5. </ul>


y necesito que salga así

Código HTML:
Ver original
  1. <ul class="list-inline">
  2. <li><a href="/sitio2/tags/etiqueta-uno" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Uno</a></li>
  3. <li><a href="/sitio2/tags/etiqueta-dos" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Dos</a></li>
  4. <li><a href="/sitio2/tags/etiqueta-tres" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Etiqueta Tres</a></li>
  5. </ul>

Espero haber explicado bien esto.
Saludos y Dios les bendiga a todos.
  #2 (permalink)  
Antiguo 25/07/2016, 06:55
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: Mover link a una lista creada.

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

http://codepen.io/AngelKrak/pen/bZrjbR
  #3 (permalink)  
Antiguo 25/07/2016, 08:38
(Desactivado)
 
Fecha de Ingreso: septiembre-2008
Mensajes: 269
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: Mover link a una lista creada.

Cita:
Iniciado por AngelKrak Ver Mensaje
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:
Ver original
  1. //Creamos una variable pasandole el html de la clase .list-inline
  2. var li = $(".list-inline").html();
  3. //creamos una variable reemplazando todos los <a de manera global (gi) por el <li><a
  4. var res = li.replace(/<a/gi, "<li><a");
  5. //Creamos otra variable reemplazando todos los a> de manera global (gi) por el a></li>
  6. var res2 = res.replace(/a>/gi, "a></li>");
  7. //finalmente, cambiamos el html de la clase .list-inline por el de la variable res2.
  8. $(".list-inline").html(res2);

Muchísimas gracias.

Etiquetas: link, lista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:24.