2

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());
3
  • 3
    Una alternativa puede ser querySelector, pero, sin el HTML es difícil darte un ejemplo. el 19 sep. 2016 a las 20:08
  • @Mauricio Deberías poner eso como respuesta, pero me parece que no sería algo trivial porque de momento no se pueden seleccionar ancestros
    – Alvaro Montoro
    el 19 sep. 2016 a las 20:50
  • 2
    @AlvaroMontoro, gracias, pero, la razón por la que creado un comentario es porque no considero que sea una respuesta completa no es que tema a los votos negativos, pero prefiero agregar respuestas con mas valor :) el 19 sep. 2016 a las 20:53

3 respuestas 3

4

Usa 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>

2

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.

1
  • mil gracias, funciona perfecto, lei las referencias que pusiste gracias de nuevo. el 20 sep. 2016 a las 15:36
0

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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.