sonne simple, hein. Lot de réponses que j'ai trouvées mais toutes utilisent JQuery ou prototype. Je veux un javascript simple. Ce ne devrait pas être si difficile, mais JavaScript n'est pas ma chose; Aucun document de documentation centrale ne signifie rechercher des âges et ne pas trouver ce que je veux.
Considérez l'extrait de code HTML suivant: p> maintenant je veux utiliser JavaScript pour faire des choses avec ces DIVS. P> function processDivElements()
{
// search for relevant DIV classes
var divArray = document.getElementsByClass.regex('/^central_.*$/');
// do stuff with the DIV elements found
foreach (divArray as divElement)
{
divElement.style.background = '#f00';
};
}
4 Réponses :
La solution de jQuery est vraiment agréable: Si vous souhaitez uniquement prendre en charge les nouveaux navigateurs, vous pouvez utiliser DOCUMENT.QUERYSLORTEALLALL () CODE> Pour faire essentiellement la même chose: P> var $divs = $('.central'); // jQuery
var divs = document.querySelectorAll('.central'); // Newer browsers
var divs = document.getElementsByClassName('central'); // Older browsers
Afaik JQ appelle en fait document.Queryselectorall si le navigateur prend en charge
@Twinight: Oui. QuerySelectorallall est plus rapide que de traverser le DOM à l'aide de JavaScript.
Merci pour votre réponse monsieur! Cependant, j'ai plusieurs raisons de ne pas vouloir utiliser des bibliothèques externes telles que JQuery. Je préférerais la solution JavaScript «horrible» sur une solution de bibliothèque n'importe quel jour. En outre, votre suggestion d'utiliser des identifiants plutôt que des classes est compréhensible. Cependant, sachez que ma question est extrêmement simplifiée. Les divs en question ont déjà un identifiant utilisé à des fins différentes, et autant que je sache que un ID est autorisé. C'est pourquoi je dois utiliser des cours à la place. Je ferai rapport si votre solution traditionnelle fonctionne pour moi. Merci encore!
Je sais que c'est 10h ans, mais vous pouvez utiliser l'attribut Nom sur le lieu d'identifiant. et utiliser .getelementsByname ("nameTtribute")
Il n'y a aucun moyen d'obtenir directement les éléments correspondants par Regex, la seule chose que vous puissiez faire est d'obtenir tous les éléments par quelque chose (comme: TagName, nom, etc.), puis filtrez les éléments par regex.
Avec votre échantillon HTML, vous ne pouvez obtenir que tout l'élément par TAGName et utiliser regex pour vérifier le nom classname par regex.
Comme les autres ont mentionné, vous ne pouvez pas prendre en charge directement une sélection de RegEx sur le Mais je vais souligner ces autres problèmes avec votre code, puisque vous êtes nouveau à JavaScript.
Utiliser des cours est bien, mais vous faites plus de travail pour vous-même en écrivant votre HTML comme ça.
au lieu du Aussi, vous devriez vraiment envisager de coller aux meilleures pratiques pour la langue. Si vous n'abandonnez pas les règles CSS à vos éléments avec ces classes, vous devriez utiliser , plus il facilite votre vie. getelementsbyclassname Methy Call.
central_0 .... Central_2 S'ils fonctionnent tous essentiellement sur les mêmes règles CSS, vous devez les écrire comme ce Central Zero .... Central Deux Puis votre classe Central peut avoir des règles identiques, tandis que vous pouvez attribuer des différences aux classes # . De cette façon, vous adhérez également à la Principe sec .
Un moyen plus rapide de le faire est de créer un simple
Est-ce quelque chose que vous faites juste pour le plaisir? Sauf si c'est une expérience d'apprentissage amusante, je suggère fortement d'utiliser JQuery pour cela si elle est de quelque manière que ce soit lié au travail du monde réel.
Pour être juste, certaines personnes ne veulent pas / doivent charger une bibliothèque entière pour une seule fonction.
Bien qu'il soit vrai qu'il n'y ait pas beaucoup de matériaux JS "officiels", vous pouvez commencer assez rapidement au MDN: développeur.mozilla.org/en-us/docs/javascript . Il a une documentation Great JS.
@ZEB - C'est juste une question de savoir combien son temps vaut la peine et combien la valeur de 32k ou de JQuery utilise vaut la peine. Mon argent est sur le temps du développeur étant la quantité la plus précieuse là-bas.
Je recommande vivement de ne pas utiliser JQuery à moins que vous ne prévoyez de tirer parti de la plupart de ce qu'il offre. Pour l'utiliser pour quelque chose comme celui-ci est un peu ridicule lorsque seulement 100 octets seront utilisés de 32k qui le comprend.
@SReject: Si vous chargez JQuery de CDN de Google, il y a une très bonne chance que le navigateur de l'utilisateur le charge du cache.
1: «Une bonne chance» ne signifie pas que ce sera. De plus, la taille de JQuerys dans le fichier est une chose, mais elle grandit car elle est intuitée par le moteur JS. 2: CDN demande à Devs de ne pas relier à leurs référentiels, mais plutôt à héberger le (s) fichier (s) sur votre propre serveur
Je pense que la chose à retenir ici est que le temps d'un développeur, et plus de code maintenu sont à la fois infiniment plus précieux / important que 32k de bande passante. Peut-être que c'est la seule chose jQuery dont il a besoin maintenant , jusqu'à ce qu'il souhaite des événements délégués, puis de basculer la visibilité d'un élément, puis de fader un élément, etc.
@Sreject: L'ensemble du point d'un CDN consiste à exploiter la mise en cache du navigateur. Vous êtes encouragé à charger jQuery et autres bibliothèques d'un CDN pour enregistrer la bande passante.