Discussion :

[neo18045]

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.

[devyan]

Bonjour,

Si je comprends bien tu cherches quelque chose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pour plus de détails regarde ICI.

devyan

[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 ?

[devyan]

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 vient de me donner pour "jquery regex selector"

Ce qui donnerai quelque chose du genre ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devyan

[neo18045]

Oula pas simple ton truc

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.

[devyan]

Oula pas simple ton truc

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ajouter une bordure de 5 pixels à tous les DIV de z-index égal à 2 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devyan

[neo18045]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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