Modifier balise img

**dublow** · 12/05/2011, 11h03

Bonjour à tous,

j'ai le code suivant

Code :

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

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 :

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

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

**w3ar3dus1** · 12/05/2011, 14h01

La balise <img /> est auto fermante.

Code :

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

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

Code :

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

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

**w3ar3dus1** · 12/05/2011, 14h07

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 :

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

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

**Bovino** · 12/05/2011, 15h16

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

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 :

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

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

**w3ar3dus1** · 12/05/2011, 16h05

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.

**w3ar3dus1** · 12/05/2011, 17h32

@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.

**Bovino** · 12/05/2011, 17h54

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

A titre d'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
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.

**w3ar3dus1** · 12/05/2011, 17h57

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

**danielhagnoul** · 16/05/2011, 21h09

Envoyé par Bovino

Code :

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

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

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

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

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
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);
		});
	});

Modifier balise img

jQuery

Discussions similaires

Partager

Partager