Eléments imbriqués

Bonjour à tous,

Ma question du jour est très simple, j'ai quelque chose comme :

<ul><li><section></section></li><li></li><li></li><li></li></ul>

Avec jQuery je change des paramètres sur les li qui fonctionnent très bien. Mon souci c'est que si je suis sur le section, l'effet se produit également. Je voudrais qu'il ne se produise QUE sur le li et non pas sur les éléments qu'il contient.

Quelqu'un pourrait-il me dire comment faire ?

Merci à vous.
Modifié par MagicCarpet (02 Feb 2013 - 10:56)

Bonjour,

As-tu essayé avec un sélecteur d'exclusion ? (peut-être plus facile en dotant cet item d'une class ou d'un id spécifique) ?

Un sélecteur d'exclusion ? Je vais faire un tour sur Google parce que là, je ne sais pas de quoi tu parles

EDIT : si je fais .not('section'), ça ne fonctionne pas
Modifié par MagicCarpet (02 Feb 2013 - 12:49)

Il y a sûrement mieux à faire, mais ceci semble fonctionner :

<ul>
	<li class="not">
		<section>
		<h1>Articles</h1>
			<article>
				<h1>Titre de l'article</h1>
  				<p>Contenu de l'article</p>
			</article>
		</section>
	</li>
	<li>Un truc</li>
	<li>Un autre truc</li>
	<li class="not">Dernier truc</li>
</ul>
<script>
    $(document).ready(function() {
    $("li").not("li.not").css("background-color", "yellow");
    });
</script>

A priori, fonctionne aussi :

$("li").not("li:first").css("background-color", "yellow");

A condition que ce soit toujours le premier item qui soit concerné...mais il y a d'autres moyens de le cibler.

Oui mais là tu ne bloque que là où tu met des class.

Moi j'ai besoin de toutes mes li (pour l'effet, background-color, comme toi dans ton exemple) mais pas des section et tout se qui ce trouve à l'intérieur de ces sections).

EDIT : ah, j'ai pas vu tes posts suivant, donc je regarde et je reviens
Modifié par MagicCarpet (02 Feb 2013 - 13:50)

Voici un bout d'exemple HTML :

<li id="0" style=""><section><h3 contenteditable="true">Honeymoon II</h3><p class="nbr">1<span class="deleteImage" style="font-weight: bold; ">X</span></p><p class="pathImage">pictures/galleria/ad/model15.jpg<span class="right"><span id="ad0" class="color">AD</span><span id="nb0"> NB</span></span></p><p class="pathThumb" style="display: none">pictures/galleria/ad/thumbs/model15.jpg</p><textarea>&lt;span class="normal"&gt;Proportions:&lt;/span&gt; h.31, w.35cm&lt;br /&gt;&lt;span class="normal"&gt;Informations:&lt;/span&gt; Author's work 2010, Combined technique - engraved object and again heat treated and creep. The unique.&lt;br /&gt;&lt;span class="normal"&gt;Author about this work:&lt;/span&gt;</textarea></section></li>

Et voici le jQuery :

$('li').not('li > section').mouseover(function() {
		$(this).css({
			'backgroundColor': 'rgba(248, 148, 29, .6)'
		});
	}).mouseleave(function(e) {
		console.log(e);
		$(this).css({
			'backgroundColor': ''
		});
	});

Donc si je passe la souris sur la balise section j'ai mon background qui passe à l'orange.
Je veux que ce ne soit qu'avec le li et non le section et tout se qui ce trouve à l'intérieur.

Merci pour ton aide mais dans mon cas, ça ne passe pas.

Comme ça ?
Pourquoi ne pas passer par CSS ?

6l20 a écrit :
Comme ça ?
Pourquoi ne pas passer par CSS ?

C'est pas tout à fais ce que je veux faire. Là tu 'bloque' complètement le li qui contient une section. Moi je ne veux pas le bloquer. Je veux que le li affiche le background quand tu passes sur le li. Par contre quand tu passes sur le section qui es dans le li, là, le background ne doit pas s'afficher

Désolé, j'aurais du parler de boites imbriqués
Merci en tout cas.