11559 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème syntaxe jquery, mais je ne vois pas où...

Alors voilà, je voudrais arriver à ça :

upload/42744-exo.png

voici mon code :
HTML :
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<link rel="stylesheet" href="style.css" type="text/css"/>

<title>selecteurs css</title>
</head>

<body

	<ul id="selected-plays" class="clear-after">
		<li> Comédies
			<ul>
				<li><a href="commeilvousplaira">Comme il vous plaira</a></li>
				<li>Tout es bien qui finit bien</li>
				<li> Le songe d'une nuit d'été</li>
				<li>La nuit des Rois</li>
			</ul>
		</li>

		<li> Tragédies
			<ul>
				<li><a href="hamlet.pdf">Hamlet</a></li>
				<li>Macbeth</li>
				<li>Roméeo et Juliette</li>
			</ul>
		</li>

		<li> Historiques
			<ul>
				<li>Henri IV(<a href="mailto:henryiv@king.co.uk">email</a>)
				<ul>
					<li>partie I</li>
					<li>Partie II</li>
				</ul>
				</li>
				<li><a href="http://www.shakespeare.co.uk/henryv.htm">henry V</a></li>
				<li>RichardII</li>
			</ul>
			
		</li>

	</ul>


</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="selecteurs.js"></script>
</html>


CSS :
 .horizontal {
	float: left;
	list-style: none;
	margin: 10px;
}
.sub-level{
	background-color:#8C8C8C;
	padding: 5px 5px 0 5px;
}

.attribut{
	border: 2px solid red;
	
}

a {
	color: #00c;
}

a.mailto {
	background: url(mail.jpg) no-repeat right top;
	padding-right: 18px;
}

a.pdflink {
	background: url(pdf.jpg) no-repeat right top;
	padding-right: 18px;
}

a.henrylink {
	background-color: #fff;
	padding: 2px;
	border: 1px solid #000;
}


JQUERY :
$(document).ready(function(){

$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('pdflink');
$('a[href^=http][href*="henry"]').addClass('henrylink');

});


J'arrive à tout bien faire,sauf cette partie du js :

$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('pdflink');
$('a[href^=http][href*="henry"]').addClass('henrylink');


Rien à faire ça passe pas, pourtant les images on le bon nom, elles sont au bon endroit...
Je pense que j'ai un problème de syntaxe jquery car le tuto s'est bien déroulé sauf sur ces trois dernières lignes.

Merci pour vos réponses !
Modifié par ervator (11 Jan 2012 - 10:00)
Bonjour aussi,

Merci d'éditer ton message et d'en changer le titre afin qu'il décrive ton problème, si possible en français correct.

Merci d'avance,
Merci Laurie-anne pour ta réponse,

Désolé pour mon incivilité, mais (et cela n'excuse rien) il était tard et j'ai passé la soirée à m'arracher les cheveux sur tout un tas de trucs qui marchaient pas (ordis, jquery) et justement j'ai posté à l'"arrache".
As tu essayé en entourant tes valeurs de guillemets dans tes selecteurs jQuery (comme tu l'as fait par exemple pour le selecteur *= ) ?
OUI ÇA MARCHE !!

c'est dingue, je suis pourtant persuadé de l'avoir essayé hier soir...
Je crois que se coucher tard nuit, vraiment !

Merci beaucoup.
Modifié par ervator (11 Jan 2012 - 16:37)
Sujet clos
Aller à