11521 sujets

JavaScript, DOM et API Web HTML5

Script pour entourer 2 balises label+input

bonjour

je tente sans succès d'entourer plusieurs couples de balises <label> + <input> par une <div>.

voici le code qui ne marche pas 
$('#commentform label + #commentform input').wrap('<div class="form-group"></div>');


la page est visible par ici (zone commentaire):
http://test.vincentbourganel.fr/20140629-vacances-ete-corse/_mg_1281.jpg.html

le code est généré automatiquement par le code PHP de l'appli ZenPhoto, et je n'y ai donc pas accès, d'où mon besoin de pouvoir ajouter ces balises via jquery.

une autre manière pourrait être de remplacer la balise <p> existante par <div class="form-group"></div>, mais je ne sais pas faire.

merci d'avance de votre aide.
Bonjour,

Pour répondre à la première manière dont tu parles, tu trouveras peut-être ta réponse sur cette page (en anglais). Il me semble qu'il s'agit du même souci ...
Modérateur
Salut,


C'est ton sélecteur qui coince :
$('#commentform label + #commentform input')

Il cherche un input contenu dans un bloc avec l'id "commentform" lui même adjacent à un label contenu dans un bloc avec l'id "commentform".
Il faudrait donc revoir ton sélecteur comme ceci :
$('#commentform label + input')

Ici tu sélectionne bien un input (et non pas un bloc avec l'id "commentform") adjacent a un label.

Mais pas si vite, avec un tel sélecteur du ne choppe que le input.
Il faudrait alors remonter au parent, le p pour pouvoir le wrapper, ou lui ajouter la classe directement.

Après, as-tu vraiment besoin de wrapper tout ca dans un div ?
Ne peux-tu pas te satisfaire d'un sélecteur css comme ceci :
#commentform p{
background:red;
}


Si "non", du coup oui il faut passer par le js mais je verrai plus un truc du genre :
- je choppe tout les "p" du form
- s'ils ont un enfant "input" lors je leur ajoute une class "form-group"
_laurent a écrit :
C'est ton sélecteur qui coince :
$('#commentform label + #commentform input')
@_laurent : tout à fait d'accord! Avec la fonction wrap(), les sélecteurs se résument aux noms de balises, me semble-t-il.
_laurent a écrit :
Salut,


C'est ton sélecteur qui coince :
$('#commentform label + #commentform input')

Il cherche un input contenu dans un bloc avec l'id "commentform" lui même adjacent à un label contenu dans un bloc avec l'id "commentform".
Il faudrait donc revoir ton sélecteur comme ceci :
$('#commentform label + input')

Ici tu sélectionne bien un input (et non pas un bloc avec l'id "commentform") adjacent a un label.

Mais pas si vite, avec un tel sélecteur du ne choppe que le input.
Il faudrait alors remonter au parent, le p pour pouvoir le wrapper, ou lui ajouter la classe directement.

Après, as-tu vraiment besoin de wrapper tout ca dans un div ?
Ne peux-tu pas te satisfaire d'un sélecteur css comme ceci :
#commentform p{
background:red;
}


Si "non", du coup oui il faut passer par le js mais je verrai plus un truc du genre :
- je choppe tout les "p" du form
- s'ils ont un enfant "input" lors je leur ajoute une class "form-group"


j'avais mal compris le sélecteur label1+label2 car je croyais que cela permettrait de sélectionner les 2 balises correspondantes Smiley decu .

en relisant vos différents commentaires, j'en suis venu à essayer la syntaxe suivante :
$('#commentform label + input').parent().wrapInner('<div class="form-group"></div>');


et ça marche bien comme ça !


l'autre méthode serait de remplacer les balises <p></p> par les balises <div></div> sans changer le code HTML contenu entre les balises <p></p>.

si vous avez une solution, je suis preneur

merci de votre aide
Modifié par vincent3569 (02 Apr 2015 - 13:57)
J'ai trouvé ceci sur le site Stackoverflow :
$('p').replaceWith(function(){
    return $("<div />").append($(this).contents());
});
A essayer peut-être ...

EDIT: j'ai testé ceci et ça fonctionne (HTML5)
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TEST</title>

</head>
<body>
	<p><b>Bonjour!</b></p>
	<p><i>Salut!</i></p>
	<p><span>Ligne 3</span></p>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script>
	$(document).ready(function() 
	   {
		$('p').replaceWith(function(){
			return $("<div />").append($(this).contents());
		});
	   }
	);
	</script>
</body>
</html>

Modifié par lddsoft (02 Apr 2015 - 17:09)
Modérateur
Salut !
vincent3569 a écrit :
l'autre méthode serait de remplacer les balises &lt;p&gt;&lt;/p&gt; par les balises &lt;div&gt;&lt;/div&gt; sans changer le code HTML contenu entre les balises &lt;p&gt;&lt;/p&gt;.

Désolé de revenir sur ça mais quel est l’intérêt de remplacer un p par une div ? J'en vois aucun... Autant donner une classe au p et le styler comme tu aurais styler la div c'est moins lourd non ?

[EDIT] Du genre :
$('#commentform label + input').parent().addClass('form-group');

Modifié par _laurent (02 Apr 2015 - 18:03)
@_laurent:
_laurent a écrit :
Désolé de revenir sur ça mais quel est l’intérêt de remplacer un p par une div ? J'en vois aucun...
Nous sommes bien d'accord, mais je ne faisais que répondre à la question posée par vincent3569 ...
Modérateur
@lddsoft oui oui je lui demandais à lui en discussion ouverte, ta solution répond parfaitement a sa demande Smiley biggrin
bonjour

merci pour toutes vos réponses.
j'utilise zenphoto qui génère du code html via du php et j'utilise par ailleurs bootstrap pour faire le design de mon site.
pour styler certains objets, le framework prévoit une balise div.
je fais "bêtement" ce qui est demandé Smiley confus
Sujet clos
Aller à