jQuery Búsqueda - Método filter()

Manual de referencias de jQuery para el bucle

Ejemplo

Cambiar el color de todos los div y luego agregar un borde a la clase "middle":

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

Pruebe usted mismo

Definición y uso

El método .filter() reduce la colección de elementos coincidentes a los elementos que coinciden con el selector especificado.

Sintaxis

.filter(selector)
Parámetros Descripción
selector Valor de cadena, que contiene la expresión de selector proporcionada para que coincida con la colección actual de elementos.

Descripción detallada

Si se proporciona un objeto jQuery que representa una colección de elementos DOM, el método .filter() construirá un nuevo objeto jQuery con un subconjunto de elementos que coinciden. El selector utilizado testeará cada elemento; todos los elementos que coinciden con el selector se incluirán en el resultado.

Pensando en la siguiente página con una lista simple:

<ul>
  <li>elemento de lista 1</li>
  <li>elemento de lista 2</li>
  <li>elemento de lista 3</li>
  <li>elemento de lista 4</li>
  <li>elemento de lista 5</li>
  <li>elemento de lista 6</li>
</ul>

Podemos aplicar este método a la colección de elementos de lista:

$('li').filter(':even').css('background-color', 'red');

Pruebe usted mismo

El resultado de esta llamada es establecer el fondo de color rojo para los elementos 1, 3, 5, ya que todos coinciden con el selector (recuerde, :even y :odd utilizan índices basados en 0).

Uso de la función de filtrado

La segunda forma de usar este método es filtrar elementos mediante una función en lugar de un selector. Para cada elemento, si la función devuelve true, el elemento se incluirá en la colección filtrada; de lo contrario, se excluirá.

Vea el siguiente fragmento de HTML algo más complejo:

<ul>
  <li><strong>lista</strong> elemento 1 - una etiqueta strong</li>
  <li><strong>lista</strong> elemento <strong>2</strong>
   - dos <span>etiquetas strong</span></li>
  <li>elemento de lista 3</li>
  <li>elemento de lista 4</li>
  <li>elemento de lista 5</li>
  <li>elemento de lista 6</li>
</ul>

Podemos seleccionar estos elementos de lista y luego filtrarlos basándonos en su contenido:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
).css('background-color', 'red');

Manual de referencias de jQuery para el bucle