Buenas tardes, tengo esta linea de código, funciona perfectamente, pero me gustaría saber si hay alguna forma de remover todos los .parent
de alguna forma
$(this).parent().parent().parent().parent().find("input").val($(this).text());
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadUsa closest()
en combinación con el tipo de elemento o clase que quieras seleccionar. closest
te devolverá el primer elemento ancestro que cumpla la condición del selector.
Un ejemplo de como funciona:
$("span").on("click", function() {
$(this).closest("table").find("input").val( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<span>Pulsa aquí</span>
</div>
</td>
<td>
<div>
<span>No, mejor aquí</span>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>
<input type="text" />
</div>
</td>
</tr>
</table>
Teniendo ▼:
$(this).parent().parent().parent().parent().find("input").val($(this).text());
Una mejora sería ▼:
$(this).parents().eq(3).find("input").val($(this).text());
Véase .parents()
y .eq()
para más información.
Puedes hacer uso de .parents()
de jQuery.
te dejo un ejemplo
$(document).ready(function(){
$("span").css({"color": "red", "border": "2px solid red"});//elemento this
$("span").parents("ul").css({"color": "red", "border": "2px solid red"});
});
body * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>Elemento this</span>
</li>
</ul>
</div>
querySelector
, pero, sin el HTML es difícil darte un ejemplo.