Aprenderemos cómo encontrar un elemento usando la API de jQuery. Este artículo requiere algún conocimiento de HTML , CSS , JavaScript , Bootstrap y jQuery. Los elementos se pueden seleccionar en función de si contienen la string que queremos encontrar. Esto se puede hacer usando el jQuery contains selector para seleccionar elementos que contienen la string.
Acerca de contiene selector
Según el elemento, el texto coincidente puede aparecer directamente dentro o dentro de un descendiente del elemento seleccionado. El selector :contains() en jQuery se usa para seleccionar elementos que contienen la string especificada. El texto debe tener un caso coincidente para ser seleccionado.
Sintaxis: Una string de texto a buscar. Es sensible a mayúsculas y minúsculas.
jQuery(":contains(text)")
Acercarse:
- Cree un archivo HTML » index.html» en su sistema local.
- Siga la plantilla HTML básica y los dos párrafos agregando el texto dentro de la etiqueta <p> .
- Seleccione la etiqueta <p> con el selector de contenido y pase la palabra clave que desea seleccionar como parámetro en el método de selector de contenido .
- Después de seguir con éxito los pasos anteriores, adjunte una propiedad CSS a ese párrafo seleccionado que contiene la palabra clave que pasa como argumento en el método contiene .
Ejemplo: En este caso buscamos el elemento que contiene la palabra “Gfg”. Cambiamos el color del párrafo particular que contiene la palabra «Gfg» después de seleccionar el elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
border: 2px solid green;
min-height: 240px;
}
.center {
display: flex;
justify-content: center;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="row container">
<div class="col">
<p>
Web development refers to the building,
creating, and maintaining of websites.
Gfg includes aspects such as web design,
web publishing, web programming, and
database management. It is the creation
of an application that works over the
internet i.e. websites.
</p>
</div>
<div class="col">
<p>
Web development refers to the building,
creating, and maintaining of websites.
It includes aspects such as web design,
web publishing, web programming, and
database management. It is the creation
of an application that works over the
internet i.e. websites.
</p>
</div>
</div>
<script>
$('p:contains("Gfg")').css({ 'color': 'green' });
</script>
</body>
</html>
Producción:
contiene texto
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA