El prev() es una función incorporada en jQuery que se usa para devolver el elemento hermano anterior del elemento seleccionado. Los hermanos son aquellos que tienen el mismo elemento principal en DOM Tree. Document Object Model (DOM) es un estándar del World Wide Web Consortium definido para acceder a elementos.
anterior()
Sintaxis:
$(selector).prev()
Aquí selector es el elemento seleccionado cuyos hermanos anteriores se devuelven.
Parámetros: No acepta ningún parámetro.
Valor devuelto: Devuelve el hermano anterior del elemento seleccionado.
código jQuery para mostrar el funcionamiento del método prev():
Código #1:
html
<html>
<head>
<style>
.pre * {
display: block;
border: 2px solid lightgrey;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("h3").prev().css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body class="pre">
<div>
This is parent element !
<p>This is first paragraph </p>
<span>First span box </span>
<h2>heading 2 !</h2>
<h3>heading 3 !</h3>
<p>This is the second paragraph and next sibling to h3 !</p>
</div>
</body>
</html>
En el código anterior, el elemento hermano anterior de «h3» se resalta con color verde.
Producción:
prevTodo()
El prevAll() es un método incorporado en jQuery que se utiliza para devolver todos los elementos hermanos anteriores del elemento seleccionado.
Sintaxis:
$(selector).prevAll()
Aquí selector es el elemento seleccionado cuyos hermanos anteriores se devuelven.
Parámetros: No acepta ningún parámetro.
Valor devuelto: Devuelve todos los elementos hermanos anteriores del elemento seleccionado.
código jQuery para mostrar el funcionamiento del método prevAll():
Código #2:
html
<html>
<head>
<style>
.prevAll * {
display: block;
border: 2px solid lightgrey;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("h3").prevAll().css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body class="prevAll">
<div>
This is parent element !
<p>This is first paragraph </p>
<span>first span box </span>
<h2>heading 2 !</h2>
<h3>heading 3 !</h3>
<p>This is the second paragraph and next
sibling to h3 !</p>
</div>
</body>
</html>
En el código anterior, todos los elementos hermanos anteriores de «h3» se resaltan con color verde.
Producción:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA