Obtengo elemento HTML usando jQuery

Question

Tengo algunos DIVs con ID "div1", "div2" ... "divx". Quiero realizar una operación en ellos. ¿Hay alguna forma de obtener el elemento ID .contains "div". ¿Alguna otra idea?

Answer 1

Puede utilizar el starts with selector

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

Lo anterior se agarra todos los divs que tienen un atributo id que comienza con las letras div.

jsFiddle example that makes all divs with id div... invisible.

---

Aquí es cómo manejar el caso más complicado si desea hacer coincidir div seguido de un número, pero no div seguido por otra cosa. De modo que div1 coincidiría, pero divx no.

En este caso usamos filter() con una función. La función debería volverse verdadera para cuando queremos una coincidencia y falsa para cuando no lo hagamos. match() y una expresión regular es ideal para esto (se puede utilizar [0-9] para representar un dígito en una expresión regular o el simple [\d]):

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

attr() devuelve el valor del atributo especificado, en este caso id.

jsFiddle example that makes all div followed by number disappear, but not div followed by other things.

Answer 2

Usted podría utilizar esta (no he probado, aunque):

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

Esto hará que todos los div elementos que tienen un id que comienzan con "div".

Si quieres todas las div elementos que tienen un idcontiene "div", entonces se podría utilizar este:

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

Answer 3

El uso de identificación como Div1, div2, div3 es una mala práctica. Es como nombrar sus clases "black-bold-12px" y luego asignar esos estilos a esa clase. Se pierde el punto en la semántica.

La forma correcta de hacer esto sería usar una clase para todos ellos.

Los elementos pueden ser de más de una clase, utilizando un espacio como separador:

<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> 

Última pregunta

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Cuestiones relacionadas

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.