jQuery: Selección con comodines

Introducción

En ocasiones queremos seleccionar los elementos DOM, y lo único que tienen en común es parte de del nombre de algún atributo, como puede ser el id o una clase de CSS. jQuery no permite el uso de expresiones regulares (aunque hay algún plugin que lo realiza). Veamos con las opciones que nos proporciona jQuery que podemos realizar, que no es poco.

Ejemplos

Los selectores que me parecen mas interesantes son los siguientes:

• Atributo contiene ^[1] La sintaxis es la siguiente: [name *= "value" ]

  
    $('div[class *= name]')
  

  
  Mostrará todos los div que en su class contengan la palabra  name
  
  
• Atributo comienza por ^[2] La sintaxis es la siguiente: [name ^= "value" ] Supongo que si sabes algo de expresiones regulares te resultará familiar.

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

  
  Mostrará todos los div que en su id empiece por  item
  
  
• Atributo finaliza por ^[3] La sintaxis es la siguiente: [name $= "value" ] De nuevo si sabes algo de expresiones regulares también te resultará familiar.

  
    $('input[name $= item]')
  

  
  Mostrará todos los componentes del tipo input que en su name termine por  item

Estos tres selectores me parecen los más interesantes, también existen el de igual^[4] y no igual^[5] que comparan los valores que el valor sea el indicado o sea distinto al indicado respectivamente.

Por último indicar que estos selectores se pueden combinar para realizar una búsqueda más compleja.  Veamos un ejemplo. Supongamos que tenemos una serie de divs que se nombran item-xxx-header, item-xxx-footer, donde las xxx representan cualquier número, pero también tenemos otra serie de divs que tienen el id como section-xxx-footer. Queremos seleccionar los divs items-xxx-footer, que no sabemos exactamente cuantos son, ni los números que tendrán xxx,  por lo que con el selector $= solo no nos bastaría, ya que también nos devolvería los elementos section-xxx-footer.

  $('div[id *= item] div[id $= footer]')

Con este selector obtendríamos los elementos que necesitamos.

Bibliografia

[1] jQuery API. Attribute Contains Selector  (inglés)
[2] jQuery API. Attribute Starts With  (inglés)
[3] jQuery API. Attribute Ends With  (inglés)
[4] jQuery API. Attribute Equals (inglés)
[5] jQuery API. Attribute Not Equal  (inglés)