11548 sujets

JavaScript, DOM et API Web HTML5

Recherche de div spécifiques et application de de propriété CSS

Bonjour,

J'ai une page web qui affiche un fichier XML via une feuille de style XSL.
cet affichage se fait via un appel AJAX.

L'affichage résultant donne ce genre de résultat:


<div id="content">
	<div class="msg">
		<div class="msgbrut"></div>
		<div class="msgdecode">
			<div class="info">
				<div class="nom">Evènement</div>
				<div class="code">evt</div>
				<div class="valeur">21</div>
				<div class="desc">Emission d'un message</div>
				<div class="detail"></div>
			</div>
			<div class="info">
				...
			</div>
			...
		</div>
		<div class="infocomp">
			<div class="info">
				<div class="nom">Type d'action</div>
				<div class="code">tyac</div>
				<div class="valeur">0001</div>
				<div class="desc">Positionnement bloqué</div>
				<div class="detail"></div>
			</div>	
		</div>
	</div>
	<div class="msg">
		...	
	</div>
</div>


Je cherche via un javascript (JQuery ou JS standard) de réaliser une fonction permettant de rechercher dans chaque div "msg", une div de class "code" qui contient un texte particulier (evt par exemple) et une div de class "valeur" qui contient la valeur voulue.

dans l'exemple ci-dessus, je recherche tous les messages qui ont:

<div class="code">evt</div>
<div class="valeur">21</div>


Lorsque ce couple a été trouvé, je voudrais appliquer à la div "msg" parente, la propriété "display: none;"

J'ai réalisé cette fonction mais cela ne fonctionne pas


function hide_div_class(code_value,valeur_value)
{
	var j = 0;
	var count = 0;
	var trouve = 0;
	
	var divCollection = document.getElementsByTagName("div");
	
	for (var i=0; i<divCollection.length; i++)
	{
		if(divCollection[i].className == "msg")
		{
			j = i + 1;
			while ( divCollection[j].className != "msg" || trouve == 1 )
			{
				if ( divCollection[j].className == "code" && divCollection[j].innerHTML == code_value && divCollection[j+1].innerHTML == valeur_value )
				{
							divCollection[i].style.display == "none";
							count = count + 1;
							trouve = 1;
							alert ("Trouvé");
				}
				j++;
			}
			trouve = 0;
			i = j;
		}
	}
}


Je pense que ce doit être surement plus simple à faire en JQuery, mais je ne sais vraiment pas comment m'y prendre...

[/i][/i]
Modifié par mamax (05 May 2011 - 13:58)
Effectivement en jQuery ce sera plus rapide..
un truc du style : 

$('.msg').each(function(){
  var codeTxt = $(this).find('.code').first().text();
  var valeurTxt = $(this).find('.valeur').first().text()
  // tu fais ton test et ensuite > $(this).css({display:'none'});
})
merci pour ta réponse,

Mais dans avec ton code, comment savoir que la div ".valeur" trouvée est celle qui suit immédiatement la div ".code"?
J'avais pas vu que .msg contient plusieurs .info
Alors je ferai : 



$('.msg .info').each(function(){ 
  var codeTxt = $(this).find('.code').first().text(); 
  var valeurTxt = $(this).find('.valeur').first().text() 
  // tu fais ton test et ensuite > $(this).parents('.msg').first().css({display:'none'}); 
})


La tu es sur que c'est le couple code/valeur de ta div .info
Oui,

Dans mes div ".msg" j'ai:

1) une div ".msgdecode" qui contient des div ".info" qui elle même contient un couple code/valeur
2) une ou plusieurs div ".infocomp" qui contiennent des div ".info" qui elle même aussi contiennent un couple code/valeur

concernant le couple code/valeur, ce sera toujours deux div successives qui sont à rechercher dans toutes les div enfant de la div ".msg"
je reviens pour une petite évolution du script JQuery,

Mon but est d'appliquer l'algo non pas sur toutes les div ".msg" mais uniquement sur les div ".msg" qui n'ont pas la propriété "display = none;"

En bref, dès que je trouve un div ".msg" qui n'a pas "display : none;", je lui mets "display : none"; et ensuite je check toutes les div ".info" quelle contient.

J'ai donc réalisé ceci qui semble pas fonctionné: il me traite les div qui ont "display : none"
je doit avoir oublié un truc.


$('.msg[style!="display: none;"]').each(function()
		{
			$(this).css({display:'none'});
		
		$(this).$('.info').each(function()
		{
			var codeTxt = $(this).find('.code').first().text();  
			var valeurTxt = $(this).find('.valeur').first().text();
			var descTxt = $(this).find('.desc').first().text();
			var reg = new RegExp(valeur_value);
			if ( codeTxt == code_value && valeurTxt == valeur_value || codeTxt == code_value && reg.test(descTxt))
			{
				$(this).parents('.msg').first().css({display:'block'});
			}
		});
		
		});

Modifié par mamax (06 May 2011 - 14:32)
Sujet clos
Aller à