Índice

El filtrado de los elementos del DOM

El filtrado se puede llevar a cabo en base a dos criterios:

  • Mediante una expresión

  • Mediante una función

1. Por una expresión

filter(expresión)

Recupera todos los elementos de la selección que responden al filtro que se pasa como parámetro.

  • expresión (cadena de caracteres): expresión que se desea buscar.

$("div").filter(".selected")

Es posible prever varias expresiones, separadas por comas, para aplicar múltiples filtros de búsqueda.

$("div").filter(".selected,:first")

El método devuelve un objeto jQuery.

Ejemplo

En esta página tenemos 5 cajas <div>. Tres de ellas poseen la clase middle. Al hacer clic en un botón, pedimos a jQuery que recupere solo los elementos con la clase middle. Otro botón restituye la página a su estado inicial.

Aspecto inicial:

images/9_2_1_v41.png

Aspecto obtenido al hacer clic en el botón "Filtro clase middle":

images/9_2_1_v42.png

El documento HTML:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js" ></script> 
<script> 
    $(document).ready(function(){ 
        $("#filtro").click(function(){ 
            $("div").filter(".middle") 
            .css("border-color", ...