Suppression d'objet en JS marche à moitié.. [Résolu]

[dragonfly]

Bonjour à tous.

Je viens vers vous car il y'a quelque chose qui m'échappe dans JS, je m'explique.

J'ai créé une fonction qui, en fonction d'une racine d'ID, supprime tous les éléments ayant cette racine dans leur ID. Le probléme c'est que la suppression ne se fait que sur 1 objet sur 2.

Voici mon code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
 var listeDivEnf = document.body.getElementsByTagName(typeS);
	    $j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
			listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
 
		}
	     })

En fait dans le if du match, quand je fais un "alert" avec l'ID, je remarque que seulement 1 ID sur 2 est affiché alors que quand je fais l'alert avant ce if, TOUS les ID s'affichent...

Si quelqu'un a une idée

[SpaceFrog]

y'avait longtemps quel l'on avait pas eu le une fois sur deux avec un match !!

on peut voir ou tu déclares idS ?

l'idéal est de mettre la regexp directement dans le match

le souci provient du fait que le matche provoque un déplacement du pointeur de la regExp

un pansement est de reinitialiser le pointeur de la reg en matchant à vide...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
var listeDivEnf = document.body.getElementsByTagName(typeS);
	    $j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
			listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
		rien=''
               rien.match(idS)
		}
	     })

[franculo_caoulene]

Salut,

Code :

 $j(document).ready(function(){...

Utilises-tu un framework? Si oui, pourquoi ne pas l'utiliser pleinement en faisant appel directement aux sélecteurs CSS. Tu n'aurais même plus à boucler, si c'est jQuery.

[dragonfly]

Merci pour vos réponses

idS est declaré ainsi

Code :

1
2
3
4
5
 
	var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
	for(i=0;i<listeObj.length;i++){
		obj.actionGroupe("table",listeObj[i],"efface");
	}

Avec un appel dans la fonction

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
this.actionGroupe = function(typeS, idS, action){
 var listeDivEnf = document.body.getElementsByTagName(typeS);
	    $j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
			listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
 
		}
	     })
}

Je ne comprends pas le déplacement du curseur du pointeur, c'est quoi ce probléme?
En fait j'utilise souvent cette fonction (avec d'autres actions, d'ou l'appel à du JQuery), sans avoir ce probléme.

De plus avec mon code plus haut en fait il y'a :

divImage1Vers1 qui est supprimé
divImage1Vers2 qui est ignoré
divImage1Vers3 qui est supprimé
etc...

Je vais voir essayer le réinit du match cet aprém.

P.S : Je n'utilise pas jQuery car je débute en JQuery et pour l'instant je ne l'utilise que pour les trucs qui sont pas faisables en JS "standard".
Aprés si y' un truc en Jquery, je prends

[SpaceFrog]

Code :

1
2
3
4
var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
	for(i=0;i<listeObj.length;i++){
		obj.actionGroupe("table",new RegExp('^'+listeObj[i]),"efface");
	}

+ le code précédent avec le reste par match sur rien

pour l'explication du pointeur
http://www.developpez.net/forums/d82...script/regexp/

[Bovino]

Spaffy, il y a aussi l'erreur classique de supprimer un élément de tableau alors qu'on est en train de boucler dessus

En gros, si le tableau à 5 éléments, si tu effaces l'entrée 2, l'occurrence suivante (3) correspondra en fait à l'indice 4 du tableau d'origine

EDIT :

je ne l'utilise que pour les trucs qui sont pas faisables en JS "standard".

Lesquels ???

[SpaceFrog]

arf yesss Beef

Code :

1
2
 
while (elt[0])

ou commencer par la fin et décrémenter

[dragonfly]

Merci pour vos réponses rapides,

j'essaye cela ce midi en rentrant chez moi.
C'est vrai que le parcours d'élément, je ne voyais pas cela comme un tableau, mais effectivement si il supprime l'élément du tableau y'a décallage et l'élement d'aprés est passé.

Mais histoire de bien comprendre ce qui se passe en fait :

le "while(elt[0])" sert à justement prendre rééllement tous les élements, donc il faut que je le mette à la place du

Code :

for(i = 0; i<listeDivEnf.length ; i++){...

Mais du coup le match doit se faire avant de parcourir la liste des solutions possibles (sinon le while ne s'arrête jamais car j'ai des elements qui ne rentrent pas dans le match).

Ou sinon je peut incrémenter un compteur et supprimer l'element comme suis

Code :

1
2
 
listeDivEnf[i-cpt].parentNode.removeChild(listeDivEnf[i-cpt]);

ce qui est moins "conventionnel" mais qui est plus rapide

Envoyé par Bovino

EDIT :



Lesquels ???

Des trucs du genre :

Code :

1
2
 
if ($j(listeDivEnf[i]).css("display")=="none"){...

Faisable en standard surement mais bcp plus simple via jQuery.


Je test tout ça et je reviens vers vous.
Mille mercis pour vos éclaircissement (je suis un peu confus aussi car j'ai l'impression que ce probléme arrive assez souvent)

[Bovino]

Attention, le while(elt[0]) servira pour supprimer tous les éléments listés. Pour n'en supprimer qu'une partie, il faut passer par une boucle inversée :

Code :

for(i = listeDivEnf.length - 1; i>=0 ; i--)

Sinon

Code :

if ($j(listeDivEnf[i]).css("display")=="none")

s'écrit facilement sans jQuery :

Code :

if (listeDivEnf[i].style.display=="none")

[franculo_caoulene]

Code :

$j('div[id^="racine"]').empty();

Je ne sais pas sur quel genre de projet tu travailles. Soit, jQuery est utilisé ailleurs, à ce moment là "tu dois" l'utiliser. Soit il n'est utilisé nulle part ailleurs, à ce moment là supprimes

Code :

 $j(document).ready(function(){...

[dragonfly]

Envoyé par Bovino

Sinon

Code :

if ($j(listeDivEnf[i]).css("display")=="none")

s'écrit facilement sans jQuery :

Code :

if (listeDivEnf[i].style.display=="none")

En fait ce n'est pas exactement la même chose car le
if (listeDivEnf[i].style.display=="none")
ne raméne rien si il n'est défini QUE dans le CSS mais la version JQuery raméne bien quelque chose. (avant de prendre la version JQuery, j'utilisais ta méthode qui ne fonctionnait pas la "premiére" fois que l'objet passait dans le test).

Franculo_caoulene, le jQuery est bien utilisé autre part (mais pas de rapport avec mon probléme donc je l'ai pas mis...(en fait si CF plus haut)).

Je dois pas être bien OP ce matin, Bovino effectivemment la boucle inversé régle cette partie du probléme assez facilement (je sais pas pourquoi dans ma tête je voyais l'usine à gaz => à tort).

Je test et je reviens vers vous en début d'aprém.

Bon ap'

[dragonfly]

Re bonjour,

avec simplement

Code :

for(i = listeDivEnf.length - 1; i>=0 ; i--)

le probléme a totalement disparu.
Je n'ai pas eu besoin de modifier le regexp.

Merci beaucoup pour vos réponses rapides et ô combien utile

Bonnes fêtes

[dukej]

Envoyé par dragonfly

Merci pour vos réponses rapides,

j'essaye cela ce midi en rentrant chez moi.
C'est vrai que le parcours d'élément, je ne voyais pas cela comme un tableau, mais effectivement si il supprime l'élément du tableau y'a décallage et l'élement d'aprés est passé.

Mais histoire de bien comprendre ce qui se passe en fait :

le "while(elt[0])" sert à justement prendre rééllement tous les élements, donc il faut que je le mette à la place du

Code :

for(i = 0; i<listeDivEnf.length ; i++){...

Mais du coup le match doit se faire avant de parcourir la liste des solutions possibles (sinon le while ne s'arrête jamais car j'ai des elements qui ne rentrent pas dans le match).

Ou sinon je peut incrémenter un compteur et supprimer l'element comme suis

Code :

ce qui est moins "conventionnel" mais qui est plus rapide



Des trucs du genre :

Code :

Faisable en standard surement mais bcp plus simple via jQuery.


Je test tout ça et je reviens vers vous.
Mille mercis pour vos éclaircissement (je suis un peu confus aussi car j'ai l'impression que ce probléme arrive assez souvent)

En fait pour mieux comprendre la chose et ça éclaircira tous les esprits :
quand tu fais un

Code :

var div = machin.getElementsByTagName('div');

tu récupères div, mais div n'est pas un tableau mais une "nodelist", et une nodelist est dynamique, ce qui signifie que si tu supprimes un div à l'intérieur de "machin", alors la nodelist "div" voit son nombre diminuer. Et du coup l'index de tes divs est décaler aussi.

J'espère avoir été assez clair. Si plus d'infos demandez moi

[danielhagnoul]

Bonsoir

Envoyé par franculo_caoulene

Salut,

Code :

 $j(document).ready(function(){...

Utilises-tu un framework? Si oui, pourquoi ne pas l'utiliser pleinement [...]

Où : Pourquoi faire simple lorsque l'on peut faire très compliqué !

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
// sauf erreur de ma part, le code qui suit se résume à un simple :
$("div[id^='divImage']").remove();
 
/*
var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
 
for(i=0;i<listeObj.length;i++){
	obj.actionGroupe("table",listeObj[i],"efface");
}
 
this.actionGroupe = function(typeS, idS, action){
	var listeDivEnf = document.body.getElementsByTagName(typeS);
 
	$j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
					listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
		}
	});
}
*/

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<div id="divImage1Vers">
			<p>Un mot pour remplir</p>
		</div>
		<div id="divImage2Vers">
			<p>Un mot pour remplir</p>
		</div>
		<div id="divImage3Vers">
			<p>Un mot pour remplir</p>
		</div>
		<div id="divImage4Vers">
			<p>Un mot pour remplir</p>
		</div>
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
// le code qui suit se résume à un simple :
$("div[id^='divImage']").remove();
 
/*
var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
 
for(i=0;i<listeObj.length;i++){
	obj.actionGroupe("table",listeObj[i],"efface");
}
 
this.actionGroupe = function(typeS, idS, action){
	var listeDivEnf = document.body.getElementsByTagName(typeS);
 
	$j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
					listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
		}
	});
}
*/
		});
 	</script>
</body>  
</html>

[dragonfly]

A tester, mais c'est vrai que c'est plus simple...

Merci

[SpaceFrog]

tester ? pourquoi faire ...