Cómo filtrar elementos HTML en jQuery

JQuery es una biblioteca de JavaScript con sintaxis más fácil de aprender. Al igual que su lenguaje matriz JS, JQuery también se puede integrar con HTML para realizar varias operaciones. La jQuery proporciona el soporte para filtrar elementos HTML utilizando varios métodos que incluyen primero (), last (), eq (), slice (), filtro (), has () y no () métodos. Esta guía proporciona objetivos de filtrar elementos HTML en jQuery y proporciona los siguientes resultados de aprendizaje.

• Trabajo de todos los métodos para filtrar elementos HTML en jQuery
• uso de cada método (con ejemplos)

Cómo filtrar elementos HTML en jQuery

Esta sección solicita el funcionamiento de varios métodos para filtrar elementos HTML en jQuery.

Cómo usar el primer método ()

El primer método () filtra los elementos basados ​​en alguna condición y devuelve el primer elemento de los elementos coincidentes. La sintaxis del primer método () se muestra a continuación:

$ ("Selector").primero();

Ejemplo

En el código anterior,

• El método primero () se aplica en selector = "pag"
• El método addclass () se aplica para diferenciar el elemento filtrado

Producción

La salida muestra que solo se selecciona el primer párrafo, y su fondo se cambia utilizando el "primero" clase.

Cómo usar el último () método

Este método devuelve el último elemento del conjunto de elementos coincidentes. Funciona en la siguiente sintaxis:

$ ("Selector").último();

Ejemplo

El código anterior practica el último método () en el elemento de párrafo y un jQuery addClass () El método se agrega para incrustar una clase CSS.

Nota: El propósito de la clase CSS es resaltar el elemento emparejado.

Producción

Cómo usar el método eq ()

El método eq () devuelve el elemento que coincide con el número de índice del elemento. Este método utiliza la siguiente sintaxis

$ ("Selector").eq ();

El método eq () acepta valores numéricos positivos o negativos. El valor positivo comienza a contar desde los elementos iniciales (o superiores), mientras que el índice de valor negativo comienza a contar desde el extremo inferior.

Ejemplo

El siguiente ejemplo practica el método eq () en índices positivos y negativos.

El código se describe a continuación,

• el Eq (3) está utilizando el número de índice positivo y la clase CSS = "positivo"Está asociado con el método EQ (3).
• el Eq (-3) usa el número de índice negativo y la clase CSS = "negativo"Se ejerce cuando se ejecuta la ecuación (-3).

Producción

Desde la salida anterior, el eq (3) obtiene el último párrafo (como está en el índice = 3) y el Filtros de ecualización (-3) El tercer elemento desde la parte inferior (cero está reservado para el primer elemento y -1 es para el último elemento).

Cómo usar el método Slice ()

El método de corte devuelve el rango específico (definido por índices) de elementos. Para usar el método Slice (), se practica la siguiente sintaxis:

$ ("Selector").rebanada (comienza, pare);

El método Slice () acepta un valor numérico positivo o negativo como sus criterios de inicio/parada

• comenzar: El inicio del corte está determinado por este parámetro
• parar (opcional): Este parámetro detiene el corte antes de alcanzar el número de índice especificado
• Número de índice positivo: La indexación positiva inicia la selección de elementos del orden superior.
• Número de índice negativo: El número de índice negativo comienza a seleccionar los ELEMETNS desde el orden inferior.

Ejemplo 1: Uso del número de índice positivo

El código anterior se describe como,

• el "pag"Representa los párrafos utilizados para el"rebanada()" método
• el "rebanada (0,2)"Muestra que el corte comenzará desde el índice 0 y se detendrá antes del segundo índice
• el addclass ("positivo") El método agregará el"positivo"Clase en elementos seleccionados.

Producción

Ejemplo 2: Uso del número de índice negativo

El siguiente código practica el número de índice negativo en el método SLICE ()

• el rebanada (-2, -1) se aplica a los párrafos y comenzaría desde el segundo último elemento y termina antes del último elemento.
• el addclass ("negativo") Agregar"negativo"Clase a los elementos en rodajas.

Producción

Cómo usar el método filtre ()

El método filtre () devuelve los elementos que coinciden con un criterio específico. La sintaxis de este método se proporciona a continuación:

$ ("Selector").filtro (criterio, función (índice));

El criterios El parámetro se establece para seleccionar elementos y el parámetro de función (índice) es opcional (ejercido cuando se debe obtener un elemento específico de la selección utilizando el índice).

Ejemplo

El siguiente código practica el método filtre () para recuperar dos párrafos utilizando sus nombres de identificación y clase.

El código anterior selecciona solo aquellos párrafos que tienen class = "P1"E id ="p2".

Producción

Cómo usar el método no ()

El método no () resultaría en elementos de regreso que no están dentro de los criterios de coincidencia. O se puede decir que es lo opuesto al Método Filter (). La sintaxis de no () se da a continuación:

$ ("Selector").no (criterio, función (índice));

Ejemplo

En el código anterior,

• dos clases "P1" y "p2"Se pasan al método no ()
• el addClass ("no") se usa para colorear la selección realizada por no() método

Producción

Cómo usar el método HAS ()

Se practica el método has () para obtener el elemento que tiene elementos de rama. La sintaxis de este método se proporciona a continuación:

$ ("Selector").ha ("elemento");

En la sintaxis anterior, la "selector"Eso contiene el"elemento"Solo sería recuperado.

Ejemplo

Para una mejor comprensión del método HAS (), se ejecuta el siguiente código.

El código anterior traza que "div"Etiqueta que tiene el"párrafo" elemento. Además, la clase CSS = "tiene"Se usa para mostrar el seleccionado"div" etiqueta.

Producción

La salida anterior muestra que el div que contiene párrafos solo se selecciona y que div está coloreado con color verde bosque.

Conclusión

JQuery admite varios métodos como First (), Last (), eq (), no (), ha (), Slice () etc., Para filtrar elementos HTML. Esta guía proporciona el trabajo y el uso de cada método uno por uno. Cada método sigue un filtrado diferente para seleccionar algunos elementos. Por ejemplo, los métodos eq () y slice () utilizan números de índice, mientras que otros métodos usan la clase o ID (de un elemento) para filtrar elementos HTML.