offset de plusieurs elements

Marsh Posté le 28-09-2016 à 16:25:11

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 !

Marsh Posté le 28-09-2016 à 16:25:11

Marsh Posté le 29-09-2016 à 10:46:35

Bonjour,

$('article') signifie que tu sélectionnes l'ensemble des balises "<article>", tu manipules alors une variable de type tableau.
Ce que tu fais n'as donc pas de sens, tu demandes les coordonnées de la liste des articles et non des articles. Il te faut sélectionner les articles en eux-mêmes :

$('article')[0] par exemple retourne le premier article.

Il te suffit ensuite de boucler sur ton tableau pour le parcourir, il existe peut-être un moyen plus simple en jquery pour parcourir tous les éléments sélectionnés mais je connais peu cette bibliothèque.

Marsh Posté le 29-09-2016 à 14:42:44

Oui merci de m'avoir aiguiller !
J'ai résolu mon problème grace à la méthode each de JQuery qui permet de boucler sur mes elements article.

Code :

$(document).ready(function(){
$('article').each(function(){
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);
});
});

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *