Comment remplacer une balise html

**Ikaly** · 12/07/2013, 14h34

Bonjour à tous,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

J'ai essayé avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sauf que ça donne ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
<li>text1</li>
<ul><li></li></ul>
<li>text2</li>
</ul>

Avez vous une idée ? merci

**danielhagnoul** · 13/07/2013, 11h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$( "li.sep" ).parent().children().each( function( i, item ){
	$( item ).wrap( "<ul></ul>" );
});

**NoSmoking** · 13/07/2013, 19h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**Ikaly** · 14/07/2013, 17h16

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.

**NoSmoking** · 14/07/2013, 22h57

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.

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

le CSS est là pour t'aider.

**Ikaly** · 14/07/2013, 23h19

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.

**NoSmoking** · 14/07/2013, 23h27

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Ikaly** · 15/07/2013, 00h33

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.

**NoSmoking** · 15/07/2013, 10h29

Envoyé par il y à peu

ce qui donnerait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

*Up Break

**Ikaly** · 15/07/2013, 10h46

Si tu crées une liste par exemple sur des marque de voitures

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Ikaly** · 15/07/2013, 10h47

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 15/07/2013, 12h17

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

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

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

là je ne saisie pas
exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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.

**Ikaly** · 15/07/2013, 15h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 15/07/2013, 18h50

Je restes pantois devant une telle démonstration

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.

**Ikaly** · 15/07/2013, 20h25

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

Comment remplacer une balise html

jQuery

Discussions similaires

Partager

Partager