Obtenir un élément HTML à l'aide de jQuery

Question

J'ai quelques DIVs avec ID "div1", "div2" ... "divx". Je veux effectuer une opération sur ces DIVs. Existe-t-il un moyen d'obtenir l'ID de l'élément .contains "div". Une autre idée ?

Answer 1

Vous pouvez utiliser le commence par le sélecteur

$("div[id^='div']")

Ce qui précède permet d'attraper toutes les divs qui ont une balise id qui commence par les lettres div .

Exemple de jsFiddle qui rend toutes les divs avec id div... invisible.

---

Voici comment traiter le cas le plus délicat, si vous voulez faire correspondre div suivi d'un nombre mais pas d'un div suivi d'autre chose. Ainsi, le div1 correspondrait, mais divx ne le ferait pas.

Dans ce cas, nous utilisons filtre() avec une fonction. Cette fonction doit renvoyer la valeur "true" lorsque nous voulons une correspondance et la valeur "false" lorsque nous ne voulons pas de correspondance. match() et une expression rationnelle est idéale pour cela (vous pouvez utiliser [0-9] pour représenter un chiffre dans une expression rationnelle ou la plus simple [\d] ) :

$("div").filter(function() {
    return $(this).attr("id").match(/^div[\d]+$/)
})

attr() renvoie la valeur de l'attribut spécifié, en l'occurrence id .

Exemple de jsFiddle qui rend tous les div suivi d'un numéro disparaissent, mais pas div suivi d'autres choses.

Answer 2

Vous pouvez utiliser ceci (je ne l'ai pas testé) :

jQuery("div[id^='div']")

Cela permettra d'obtenir tous les div qui ont un élément id commençant par "div".

Si vous voulez tous les div Les éléments qui ont un id contenant "div", vous pouvez alors utiliser ceci :

jQuery("div[id*='div']")

Answer 3

L'utilisation d'identifiants tels que div1, div2, div3 est une mauvaise pratique. C'est comme nommer vos classes "black-bold-12px" et ensuite assigner ces styles à cette classe. Cela ne tient pas compte de la sémantique.

La bonne façon de procéder serait d'utiliser une classe pour chacun d'entre eux.

Les éléments peuvent appartenir à plusieurs classes, en utilisant un espace comme séparateur :

<div class="something usethis">...</div>
<div class="usethis something_else">...</div>
<div class="usethis">...</div>
<div class="something anotherclass usethis" id="someId">...</div>

<script>
  $(".usethis").html("New contents for all of them!");
</script>