En este artículo, aprenderemos a obtener valor dentro de una etiqueta en negrita usando jQuery.
Enfoque: si queremos obtener el valor dentro de una etiqueta en negrita, podemos seleccionar la etiqueta usando jQuery. Podemos usar la función jQuery text() para obtener el valor de la etiqueta en negrita. Si queremos obtener valores de todas las etiquetas en negrita, podemos usar el bucle each() que seleccionará todas las etiquetas en negrita una por una.
Pasos:
- Cree algunas etiquetas HTML en negrita .
- Cree una función jQuery para obtener un valor dentro de las etiquetas en negrita.
- Mostrar el valor al usuario.
Ejemplo 1: este ejemplo tiene tres etiquetas en negrita. Cuando hacemos clic en el botón, obtendrá los valores de todas las etiquetas en negrita utilizando métodos jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<b>This is first bold tag</b> <br />
<b>This is second bold tag</b><br />
<b>This is third bold tag</b><br /><br />
<button>Click here</button><br /><br />
<div id="output"></div>
<script>
$(document).ready(function () {
$("button").click(function () {
var count = 0;
var res = "";
$("b").each(function () {
var x =
"value of index " +
count +
", bold tag is: '" +
$(this).text() +
"'<br>";
res = res + " " + x;
count++;
});
$("#output").html(res);
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo tiene tres etiquetas en negrita y dentro de cada etiqueta, tiene una palabra fuerte. Cuando hacemos clic en el botón, una función jQuery obtiene el valor dentro de cada etiqueta en negrita y muestra el texto adjunto en un div HTML .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#btnID').click(function() {
var text = "";
$("b").each(function() {
text += $(this).text();
text+=" ";
});
$("#showResult").text(text);
});
});
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<b>Welcome </b>
<b>to </b>
<b>GeeksforGeeks</b><br/><br/>
<input type="button" id="btnID" value="Get bold values"/>
<br/><br/>
<div id="showResult"> </div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KapilChhipa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA