El prevUntil() es un método incorporado en jQuery que se usa para encontrar todos los elementos hermanos anteriores entre dos elementos dados. 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. Esto define para acceder a elementos en el árbol DOM.
Sintaxis:
$(selector1).nextUntil(selector2)
Parámetros: Se acepta un parámetro “selector2” que es el último elemento seleccionado antes del cual se van a encontrar los hermanos.
Valor de retorno: Devuelve todos los hermanos entre “selector1” y “selector2”.
Código #1:
<html>
<head>
<style>
.sib * {
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() {
$("li.start").prevUntil("li.stop").css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div style="width:400px;" class="sib">
<ul>
This is parent !!!
<li class="stop">list 1 !!!</li>
<li>first list !</li>
<li>second list !</li>
<li>third list !</li>
<li class="start">list 5 !!!</li>
<li>other sibling</li>
<li>other sibling</li>
</ul>
</div>
</body>
</html>
En el código anterior, todos los elementos anteriores (o hermanos) entre «lista 5» y «lista 1» se resaltan con color verde.
Producción:
Código #2:
<html>
<head>
<style>
.sib * {
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() {
$("li.start").prevUntil("li.stop").css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div style="width:400px;" class="sib">
<ul>
This is parent !!!
<li class="stop">list 1 !!!</li>
<li>first list !</li>
<li>second list !</li>
<li>third list !</li>
<li>fourth list !</li>
<li>fifth list !</li>
<li class="start">list 7 !!!</li>
</ul>
</div>
</body>
</html>
En el código anterior, todos los elementos anteriores (o hermanos) entre «lista 7» y «lista 1» 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