Comment remplacer une balise html

Version imprimable

12/07/2013, 14h34
Ikaly

Comment remplacer une balise html
Bonjour à tous,

Je bloque sur un léger problème en jquery.
Code:

1 2 3 4 <ul> <li>text1</li> <li class="sep">text2</li> </ul>
Je souhaite scinder en 2 ul à chaque fois qu'on rencontre la class "sep"

ce qui donnerait :
Code:

1 2 <ul><li>text1</li></ul> <ul><li>text2</li></ul>
J'ai essayé avec :

Code:

$('.sep').replaceWith( "</ul><ul><li>" );

sauf que ça donne ça :
Code:

1 2 3 4 5 <ul> <li>text1</li> <ul><li></li></ul> <li>text2</li> </ul>
Avez vous une idée ? merci
13/07/2013, 11h34
danielhagnoul
Bonjour

La solution simple - $( "li.sep" ).before( "</ul><ul>" ); - ne fonctionne pas, car le navigateur la corrige automatiquement en "<ul></ul>".

Le plus simple sera donc de mettre chaque "li" dans un "ul" :
Code:

1 2 3 $( "li.sep" ).parent().children().each( function( i, item ){ $( item ).wrap( "<ul></ul>" ); });
13/07/2013, 19h11
NoSmoking
Bonjour,
autre approche, mais je ne crois pas que cela soit ce que tu souhaites car je n'en vois pas l'intérêt!
Code:

1 2 3 4 var oParent = $('.sep').parent(); var oElem = $('.sep'); oParent.after( oElem); oElem.wrap('<ul></ul>');
mais je pense qu'il faudra intégrer une boucle car la structure sera surement plus complexe.

Interrogement !!
Pourquoi ne pas faire cela directement dans le HTML?
14/07/2013, 17h16
Ikaly

merci pour vos réponses, je vais tester ça demain :)

L'objectif c'est d'avoir des listes propres pour google et de pouvoir les présenter en colonne pour l'utilisateur.
14/07/2013, 22h57
NoSmoking

Citation:

L'objectif c'est d'avoir des listes propres ...

bien que faisable en javascript, il est préférable de le faire directement dans le HTML, tiens je me répètes.

Citation:

...de pouvoir les présenter en colonne pour l'utilisateur.

le CSS est là pour t'aider.
14/07/2013, 23h19
Ikaly

Le css ne peut pas t'aider à faire ça sauf en css3 mais tu exclus direct les navigateur ie < 10 . Ce qui n'est clairement pas le but, du coup reste le js comme ultime solution.

Effectivement si le code HTML n'est pas correct le CSS ne peut rien faire.

La présentation en colonne se fera via le CSS pour peu que tes listes (UL) soient bien construites.

exemple rapide :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>[...]</title> <style> ul{ border:1px solid blue; float:left; min-width:8em; } </style> </head> <body> <ul class="liste"> <li>text 1.1</li> <li>text 1.2</li> </ul> <ul> <li>text 2.1</li> <li>text 2.2</li> </ul> <ul> <li>text 3.1</li> </ul> </body>
ça fonctionne même sur IE5.5 :mouarf:

15/07/2013, 00h33
Ikaly

Oui sauf que ça c'est tout ce que je ne veux pas... séparer les liste pour la même liste.

Essai de mettre en colonne un seul ul tu vas voir c'est plus tordu.
15/07/2013, 10h29
NoSmoking
:koi:
Citation:
Envoyé par il y à peu

ce qui donnerait :

Code:

1 2 <ul><li>text1</li></ul> <ul><li>text2</li></ul>
Citation:

Envoyé par il y à encore moins

Oui sauf que ça c'est tout ce que je ne veux pas... séparer les liste pour la même liste.

Tu veux ou tu veux pas? (Zanini)

Tu pourras utiliser le balise <UBR>* mais pas avant le HTML7 je crois :aie:

*Up Break
15/07/2013, 10h46
Ikaly
Si tu crées une liste par exemple sur des marque de voitures
Code:

1 2 3 4 5 6 <ul> <li>Renault</li> <li>Peugeot</li> <li>Citroen</li> <li>Dacia</li> </ul>
si tu veux mettre cette liste en colonne

le fait de scinder en 2 ul perd de sa pertinence pour google, et si tu mets un float left sur les <li> tu n'auras pas de vraies colonnes. D'ou le besoin du JS. Après en CSS 3 il y a des façons de faire mais pas compatibles all navigateurs.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('ul').each(function(){
	parent = $(this).parent();
	html = '';
	$('li',this).each(function(){
		if($(this).hasClass('sep')){
			html = html+'</ul><ul>';
		}
		html = html+'<li>'+$(this).html()+'</li>';
	});
	html='<ul>'+html+'</ul>';
	parent.html(html);
});

Voilà un code jquery qui fonctionne mais je trouve ça long.

Citation:

le fait de scinder en 2 ul perd de sa pertinence pour google,

hum! cela serait à démontrer mais bon!!

Citation:

si tu mets un float left sur les <li> tu n'auras pas de vraies colonnes.

là je ne saisie pas
exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>[...]</title> <style> ul{ width:20em; background:#EEF; overflow:hidden; border:1px solid blue; } li{ float:left; width:10em; } </style> </head> <body> <ul> <li>Renault</li> <li>Peugeot</li> <li>Citroen</li> <li>Dacia</li> </ul> </body> </html>
Citation:

Voilà un code jquery qui fonctionne mais je trouve ça long.

ce n'est pas la longueur du code qui me semble gênante mais le fait de faire cela à grand coup de html() et le fait que tu ne fasse pas disparaître les LI séparatrices.

Autre remarque au passage si tu utilises parent comme variable il te faut mettre le mot clé var pour la déclarer sinon tu risques de rencontrer des problèmes avec IE, d'ailleurs il est fortement conseillé de procéder de la sorte.

Si tu mets un float left, d'une part il faudra fixer la largeur pour donner un effet de colonne et d'autre part c'est compliqué pour l'ordre de tes listes. Bref cette solution n'est pas viable pour ce que je veux faire :)

Sinon tu as raison pour l'erreur provoqué sous IE j'avais pas vu... merci bien.

Actuellement ça fonctionne du coup avec ce code, je pense que je vais arrêter de chercher plus loin, si jamais quelqu'un trouve un code révolutionnaire :)

Merci pour votre aide en tout cas.

Voici la version finale du code qui créera une colonne toutes les 3 lignes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $('.layer ul').each(function(){ $parent = $(this).parent(); $html = ''; i = 0; $('li',this).each(function(){ if(i==3){ $html = $html+'</ul><ul>'; i = 0; } i++; $html = $html+'<li>'+$(this).html()+'</li>'; }); $html='<ul>'+$html+'</ul>'; $parent.html($html); });
et le html :
Code:

1 2 3 4 5 6 7 8 9 10 <div class="layer"> <ul> <li><a href="">Texte 1</a></li> <li><a href="">Texte 2</a></li> <li><a href="">Texte 3</a></li> <li><a href="">Texte 4</a></li> <li><a href="">Texte 5</a></li> <li><a href="">Texte 6</a></li> </ul> </div>

15/07/2013, 18h50
NoSmoking

Je restes pantois devant une telle démonstration :aie:

A l'avenir pose bien ton problème et ne le fais pas évoluer en cours de route.

Mon avis final est que tu as 15 lignes de code qui ne servent à rien dans ta page, mais tu es le seul maitre à bord.
15/07/2013, 20h25
Ikaly

Certes le titre n'était pas top... je ferais attention la prochaine fois. Mais si tu vois 15 lignes qui servent à rien et si tu as une solution c'est justement l'objet de ma présence ici.

En CSS il n'y a pas de solution compatibles all navigateur malheureusement, en JS par contre je suis sûr qu'il y a 20 fois mieux que ma bidouille.

Merci pour ton aide :)