En este artículo, aprenderemos cómo recuperar el valor almacenado de cualquier elemento de división usando jQuery . Esto se puede usar en situaciones en las que el valor del elemento de división debe manipularse o usarse según los requisitos.
Enfoque 1: utilizaremos los métodos jQuery data() , first() , last() y text() . Adjuntamos o almacenamos los datos del elemento de división usando el método data() que contiene dos parámetros. El primer parámetro es el nombre de los datos del elemento de división y el segundo parámetro es un objeto literal que consta de dos pares clave-valor. El valor de la primera clave es » Geeks » y el valor de la última clave es » GFG «.
Ahora hay dos elementos de intervalo definidos dentro del elemento de división que almacenarán el valor recuperado. Seleccionamos el primer elemento de tramo usando el método first() y seleccionamos el último elemento de tramo usando el método last() . Establecemos sus valores usando el método text() que consta de un solo parámetro. Para el primer elemento de intervalo, el valor se establece en el valor de la primera clave del objeto definido literalmente dentro del método de datos del elemento de división. De manera similar, para el segundo elemento de intervalo, el valor se establece en el valor de la segunda clave del objeto literal.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
div,
p {
font-size: 20px;
font-weight: bold;
}
span {
color: green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>
jQuery - Retrieve the stored value
from a division element
</p>
<!-- The division element -->
<div>The values which were stored were
<span></span> and <span></span>
</div>
<script type="text/javascript">
// Set the value to be stored
$("div").data("GeeksForGeeks", {
firstKey: "Geeks",
lastKey: "GFG"
});
// Get the stored value
$("span").first().text($("div")
.data("GeeksForGeeks").firstKey);
$("span").last().text($("div")
.data("GeeksForGeeks").lastKey);
</script>
</body>
</html>
Producción:
Enfoque 2: utilizaremos los métodos jQuery data() y html() . Este enfoque es bastante similar al enfoque anterior, pero la diferencia es que se utiliza el método html() en lugar del método text() . Ambos métodos devuelven o establecen el contenido del elemento seleccionado, pero el método html() es casi 2 veces más rápido que el método text() . Además, en lugar de elementos de dos tramos, solo hay un elemento de tramo que tiene el valor almacenado. Por lo tanto, el segundo parámetro del método data() no es un objeto literal sino un simple número.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
div,
p {
font-size: 20px;
font-weight: bold;
}
span {
color: green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>
jQuery - Retrieve the stored value
from a division element
</p>
<!-- The division element -->
<div>The value which was stored was <span></span></div>
<script type="text/javascript">
// Set the value to be stored
$("div").data("gfgValue", 1234);
// Get the stored value
$("span").html($("div").data("gfgValue"));
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA