Sélectionner un élément selon son z-index

Version imprimable

30/06/2010, 10h59
neo18045

Sélectionner un élément selon son z-index

Bonjour,

Comme le dit le titre, je voudrais savoir s'il est possible de sélectionné un élément selon son z-index ?

Car je travail sur un carrousel avec le pluggin featureCarousel, mais je n'aime pas trop la manière d'afficher la description de l'image.
Pour la manière de fonctionnement de ce carrousel, il met une image en avant, et les autre en arrière.

Je voudrais que le texte s'affiche uniquement lors du passage de la souris sur l'image. J'ai actuellement 3 images, et j'arrive à faire afficher le texte de l'image sur laquelle on passe la souris. Maintenant j'aimerais que cette affichage ne puisse se faire que sur l'image qui est en avant et pas sur celle qui sont en fond (ce qui est mon cas actuellement). Mon problème, c'est qu'il n'y a aucune classe ou autre qui dit que c'est cette image qui est devant les autres, à part justement le z-index dans les styles qui est à 1.

Donc es-ce possible ?

Merci d'avance.
30/06/2010, 12h11
devyan

Bonjour,

Si je comprends bien tu cherches quelque chose du genre :

Code:

$("input[style*='z-index:2;']")

Pour plus de détails regarde ICI.

devyan
30/06/2010, 12h18
SpaceFrog

la syntaxe retournée par les navigateurs est elle toujours la même ?

le style*= gète-t-il les possibles différences de syntaxe ?
30/06/2010, 14h26
devyan

Citation:

Envoyé par SpaceFrog

la syntaxe retournée par les navigateurs est elle toujours la même ?

le style*= gète-t-il les possibles différences de syntaxe ?

Je ne sais pas mais une petite recherche :google: vient de me donner pour "jquery regex selector"

Ce qui donnerai quelque chose du genre ...

Code:

$('div:regex(css:zindex, ^2$))');

devyan
30/06/2010, 15h08
neo18045

Oula pas simple ton truc 8O

J'ai testé mais je n'arrive pas à le mettre en place, donc pour le moment je pense que je vais garder mes trucs comme ils sont en attendant de trouver mieux.

Merci tout de même.

Citation:

Envoyé par neo18045

Oula pas simple ton truc 8O

J'ai testé mais je n'arrive pas à le mettre en place, donc pour le moment je pense que je vais garder mes trucs comme ils sont en attendant de trouver mieux.

Merci tout de même.

En fait il faut lire l'article ;)

Pour faire fonctionner cette notation il faut "injecter" le code qui va exécuter la recherche
Code:

1 2 3 4 5 6 7 8 9 10 11 12 jQuery.expr[':'].regex = function(elem, index, match) { var matchParams = match[3].split(','), validLabels = /^(data|css):/, attr = { method: matchParams[0].match(validLabels) ? matchParams[0].split(':')[0] : 'attr', property: matchParams.shift().replace(validLabels,'') }, regexFlags = 'ig', regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags); return regex.test(jQuery(elem)[attr.method](attr.property)); }
Ensuite ceci fonctionne très bien :)

Code:

$('div:regex(css:z-index, ^2$))').css('border','5px red solid');

:ccool:

devyan

J'avais déjà injecter le code de recherche, mais je vais re-tester avec ce que tu me donnes.

EDIT : j'ai toujours des soucis... voilà mon code...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
	$(document).ready(function(){
		$("#featureCarousel").featureCarousel({topPadding:0,sidePadding:0,carouselSpeed:1500});
		jQuery.expr[':'].regex = function(elem, index, match) {
			var matchParams = match[3].split(','),
				validLabels = /^(data|css):/,
				attr = {
					method: matchParams[0].match(validLabels) ? 
								matchParams[0].split(':')[0] : 'attr',
					property: matchParams.shift().replace(validLabels,'')
				},
				regexFlags = 'ig',
				regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
			return regex.test(jQuery(elem)[attr.method](attr.property));
		}
		$("#featureCarousel .feature:regex(css:z-index, ^1$))").mouseover(function(){$(this).find("p").show();});
		$("#featureCarousel .feature:regex(css:z-index, ^1$))").mouseout(function(){$(this).find("p").hide();});
	});
</script>

Erreur : match[3] is undifined