El método .addBack() de jQuery se utiliza para agregar los elementos que coinciden con el selector original al conjunto de elementos seleccionados. Esto es útil cuando se desea incluir el elemento que originalmente fue seleccionado, junto con sus elementos hijos o elementos relacionados, en el conjunto de elementos sobre el que se está operando.
Definición:
El método .addBack() devuelve el conjunto de elementos al estado en que se encontraba antes de aplicar un método .filter(), .not(), o .find(), agregando de nuevo los elementos filtrados al conjunto.
Sintaxis:
$(selector).addBack(filter)filter(opcional): Un selector, función o conjunto de elementos que se deben incluir en el conjunto resultante.
Ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .addBack() en jQuery</title>
<style>
.destacado {
background-color: lightblue;
}
.contenido {
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#botonResaltar").click(function(){
$(".contenido").find(".item").addBack().addClass("destacado");
});
});
</script>
</head>
<body>
<button id="botonResaltar">Resaltar Elementos</button>
<div class="contenido">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
</body>
</html>$(".contenido").find(".item").addBack().addClass("destacado");Explicación del ejemplo:
En este ejemplo, al hacer clic en el botón con el id “botonResaltar”, se seleccionan los elementos con la clase “item” dentro de .contenido usando .find(). Luego, .addBack() agrega el elemento .contenido al conjunto de elementos seleccionados. Finalmente, .addClass("destacado") aplica el fondo azul claro a todos los elementos seleccionados, incluyendo el contenedor y los elementos hijos.
Resultado.
Contenido Relacionado.
.addClass()
.addClass() de jQuery agrega clases CSS a los elementos seleccionados, permitiendo aplicar estilos específicos sin modificar el HTML o CSS existente.
Leer más
