Modifier balise img

Version imprimable

Modifier balise img

Bonjour à tous,

j'ai le code suivant
Code:

1 2 3 4 5 6 7 8 9 <div class="main"> <h3>Titre</h3> <div> <p>voici du texte</p> <img src="img.jpg"></img> <button class="clickme">Click me</button> </div> </div>
je souhaite recuperer ce code en jquery quand je clic sur le bouton
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function(){ $(".clickme").click(function(){ var value = $(this).parent().parent().html(); }); });
Ce que je voudrais faire maintenant, c'est supprimer la balise image de la variable, mais pas du DOM. Merci d'avance

La balise <img /> est auto fermante.

Code:

1
2
 
  <img src="img.jpg" />

Code:

1
2
3
4
5
 
(function($){
$('.clickme').live('click', function() {
    console.log(this.parentNode.parentNode.childNodes);
  });

12/05/2011, 14h07
w3ar3dus1
Oups, erreur de navigation au clavier, désolé.

Évite d'utiliser $(this) quand tu le peut, le code qui suit te renvoie un tableau avec tous les enfants de ta div (donc le p, l'img et le button), comme ça tu peut les manipuler comme tu veut.
Code:

1 2 3 4 $('.clickme').live('click', function() { var donnees = this.parentNode.childNodes; });
C'est ça ? Car je suis ne pas sûr d'avoir exactement compris ce que tu veut récupérer
12/05/2011, 15h16
Bovino
Citation:

Évite d'utiliser $(this) quand tu le peut

8O

Pourquoi ça ???
Au contraire, il faut autant que possible utiliser $(this) afin de continuer à utiliser des objets jQuery et ne pas casser la logique du framework.
Code:

1 2 var value = $(this).parent('.main').clone(); value.children().remove('img');
12/05/2011, 16h05
w3ar3dus1

C'est une question de performance, si tu n'as pas besoin de fonctions jQuery par la suite, c'est inutile de passer l'objet this à la moulinette de $().
Du JS brut sera toujours plus rapide que de passer par une framework, du moins pour les manipulations de base.
Je dis pas ça dans le vide, j'ai déjà fais des tests et j'ai vus un tas de posts qui parlent de ça.
12/05/2011, 17h32
w3ar3dus1

@Bovino: j'ai fait des tests.
Ta méthode est environs 40% plus longue à se réalisé et résulte en un peu plus de 40% d'appels en plus. Si t'as quelques scripts sur ta page, ça peut vite se ressentir.

Ben, ça me semble évident... et j'ai du mal à voir quel script jQuery pourrait être plus performant que du JavaScript pur et écrit spécifiquement :koi:
A titre d'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
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script type="text/javascript" src="jquery-1.6.js"></script>
		<script type="text/javascript">
                        function jq(unid){
                                var d1 = new Date();
                                var test, i;
                                for(i=0; i<50000; i++){
                                        test = $('#'+unid);
                                }
                                alert(new Date() - d1);
                        }
                        function js(unid){
                                var d1 = new Date();
                                var test, i;
                                for(i=0; i<50000; i++){
                                        test = document.getElementById(unid);
                                }
                                alert(new Date() - d1);
                        }
                </script>
	</head>
	<body>
		<div id="test">Div de test</div>
		<div><button onclick="jq('test');">jQuery</button></div>
		<div><button onclick="js('test');">JavaScript</button></div>
	</body>
</html>

est particulièrement éloquent.
Mais lorsque l'on utilise un framework, il est préférable de l'utiliser au maximum.

12/05/2011, 17h57
w3ar3dus1

Je voit vraiment pas pourquoi, tu peut t'expliquer s'il te plaît?

Citation:

Envoyé par Bovino

Code:

1
2
var value = $(this).parent('.main').clone();
value.children().remove('img');

:aie: L'idée est bonne, mais pas le script...

parents(".main")
value.children("div").children().remove('img');

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
$(function(){
	// Ce que je voudrais faire maintenant, c'est supprimer la balise image de la variable, mais pas du DOM. Merci d'avance
	$(".clickme").click(function(){
		var value = $(this).parents(".main").clone();
 
		/*
		 * debug avec Firebug
		 * 0 <p>
		 * 1 <img src="img.jpg">
		 * 2 <button class="clickme">
		 */
		$.each(value.children("div").children(), function(i, item){
			console.log(i, item);
		});
 
		// http://api.jquery.com/remove/
		value.children("div").children().remove('img');
 
		/*
		 * debug avec Firebug
		 * 0 <p>
		 * 1 <button class="clickme">
		 */
		$.each(value.children("div").children(), function(i, item){
			console.log(i, item);
		});
	});