Dynamiquement remplissage de tableau Javascript basé sur la classe CSS?

Question

Je suis en train de construire une application qui contient actuellement BEAUCOUP de divs cachés qui doivent être parcourus.

À l'heure actuelle, il n'y a que 5 divs dans le cycle, mais il y aura finalement 20+. Est-il possible d'obtenir tous leurs ID dans un tableau en fonction de leur classe de départ en CSS? En ce moment, la div par défaut a l'onglet 'show' des classes et les autres ont l'onglet 'hide' des classes. J'aimerais pouvoir remplir le tableau avec tous les ID des éléments qui ont la classe 'tab'.

J'ai essayé getElementsByClass, mais je ne pense pas avoir compris comment cela fonctionne - il revenait juste indéfini.

La majorité de la page est codée en PHP, donc s'il y a un moyen d'obtenir l'ID en utilisant PHP, puis de le passer en javascript, cela fonctionnera aussi.

Toute aide serait grandement appréciée =)

Answer 1

Cela vous obtiendrez tous vos divs dans un tableau par nom de classe en utilisant "pure" Javascript (à savoir hors-the-box Javascript):

var tabs = document.getElementsByClassName('tab'); 

Les divs pourraient avoir un nombre quelconque d'autres classes appliquées, mais s'ils ont la classe "tab", ils seront inclus. Le tableau tabs sera alors un tableau d'objets DOM. Pour accéder aux ids de divs, vous feriez ceci:

var id = tabs[0].id; 

De plus, si vous avez toujours voulu utiliser jQuery, cela créerait un objet semblable à un tableau similaire de divs:

var tabs = $('.tab');