recuperer offset de plusieurs balises

29 septembre 2016 à 9:24:37

Bonjour,

J'ai actuellement une page de balises <article> contenant chacune une balise <header> et une <img>.
Cette page est généré en php :
je rempli un tableau de la maniere suivante

Code :

$html_article_tab[] = "<article><header>$header</header><img src=\"$lien\" id=\"$id\"></article>"

et j'affiche ensuite cela avec une boucle.

Je voudrai afficher en bas de chaque article, ses coordonnées et l'id de son image (avec jquery) ; j'ai donc fait :

Code :

$(document).ready(function(){
var x = $('article').offset.left;
var y = $('article').offset.top;
var id = $('article').children('img').attr('id');
$('article').append("position x = " + x + " position y = " + y + " et id = " + id);

Seulement voila : tous mes articles s'affichent correctement mais les coordonnes et l'id qui s'affichent sont les mêmes pour tous les articles, soit ceux du premier article affiché.
Du coup je bloque un peu...
Merci d'avance du coup de main !

bryan33000

29 septembre 2016 à 9:35:18

Salut,

Vu que tu t'attaques à plusieurs éléments par leurs tags names (le problème aurait été le même avec des class) il faut que tu utilises $(this) et each() :

$('article').each(function(){ //Comme pour une boucle PHP tu vas maintenant pouvoir traiter chaque élément indépendemment
    var x = $(this).offset.left;
    var y = $(this).offset.top;
    var id = $(this).children('img').attr('id');
    $(this).append("position x = " + x + " position y = " + y + " et id = " + id);
});

En fait, là ton script fonctionne mais comme tu ne spécifie par à quel article tu t'attaques, ton script s'arrête à la première occurrence trouvée dans ton code HTML

Quand tu ne sais pas, Google reste ton meilleur ami ! ;)

sebastien4444

29 septembre 2016 à 9:46:32

Super ça fonctionne !
J'avais bien en tête de faire une sorte de boucle mais je ne savais pas comment m'y prendre.

Merci!

bryan33000

29 septembre 2016 à 10:58:42

Pas de soucis ! Pense juste à mettre le sujet en résolu, ca peut aider d'autres personnes

Quand tu ne sais pas, Google reste ton meilleur ami ! ;)