Más closest()

abcdefghi · #1 (**permalink**) 21/03/2010, 11:47

Hola,

Si tengo

Código HTML:

<tr id=ok>
  <td id=algo></td>  
</tr>

Quiero obtener <tr> completo, hago:

Código:

var b = $('#algo').closest('tr');

b queda con:

Código HTML:

 <td id=algo></td>

Como hago para que quede con:

Código HTML:

<tr id=ok>
  <td id=algo></td>  
</tr>

Sin usar parent().

Saludos.

caricatos · #2 (**permalink**) 21/03/2010, 13:36

Hola:

closest() no existe en javascript estándar... si se trata de una librería, avisa para mover el tema.

Saludos

abcdefghi · #3 (**permalink**) 21/03/2010, 16:00

Cita:

Iniciado por caricatos

Hola:

closest() no existe en javascript estándar... si se trata de una librería, avisa para mover el tema.

Saludos

Un millón de disculpas, si es un framework, Jquery

caricatos · #4 (**permalink**) 21/03/2010, 16:36

Tema movido desde javascript

mayid · #5 (**permalink**) 21/03/2010, 16:49

Proba esto:

miArray[0] = $(this);
miArray[1] = $('#algo').closest('tr');

O así:
var b = new Array( $(this),$('#algo').closest('tr') );

abcdefghi · #6 (**permalink**) 21/03/2010, 21:59

Cita:

Iniciado por mayid

Proba esto:

miArray[0] = $(this);
miArray[1] = $('#algo').closest('tr');

O así:
var b = new Array( $(this),$('#algo').closest('tr') );

Me has dejado descolocado, que vendría a ser

Código:

$(this)

en este caso.

Por temas de síntesis, el documento tiene mucho más componente y la tabla tiene muchas más filas.

En mi caso el

Código:

$(this)

corresponde a un elemento que esta dentro del <tr>, por ejemplo:

Código HTML:

<tr id=ok>
  <td id=algo><button id=disparoevento>Botón</button></td>  
</tr>

Código:

$('#disparoevento').click(function(){
    alert($(this).closest('tr').html());
});

Qué es lo q tratas de hacer tú con el $(this) para que pueda trasladarlo al ejemplo.

Dany_s · #7 (**permalink**) 22/03/2010, 05:21

si seleccionas un td podés ir al tr con parent, parents o closest pero depende de que tengas antes del td porque actuan diferente, cada uno tiene utilidad diferente

por ej: parent encuentra el tr si haces click en un td porque lo que le contiene antes a un td es un tr (el padre), pero si lo que buscas es un tr de una tabla principal y el td clickeado se encuentra en una tabla anidada ya no, va a encontrar solo el tr de la segunda tabla, u otra que puede ser que hagas click en un enlace y ahi el padre va a ser un td

parents si busca el padre y sigue buscando hasta hmmm ¿el abuelo? o sea busca un tr y si hay otro tr que lo contiene selecciona ese, o sea si clickeas en un enlace y le decis que busque un tr va a encontrar por mas que el enlace esté en un div después ese div esté en otro div y que a todo eso lo contenga un tr pero a la vez a ese tr lo contiene otra tabla y otra tabla y otra tabla jeje

closest busca el elemento mas cercano, o sea busca hasta el primer tr que lo contiene y listo

o sea que la mejor forma es parents

aca un ejemplo de lo que quise decir jeje

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        $('.parent1').click( function (){
            alert("$(this).parent().attr('bgcolor', 'red');");
            $(this).parent().attr('bgcolor', 'red');
        });
        $('.parent2').click( function (){
            alert("$(this).parent('tr').attr('bgcolor', 'blue');");
            $(this).parent('tr').attr('bgcolor', 'blue');
        });
        $('.parents').click( function (){
            alert("$(this).parents('tr').attr('bgcolor', 'green');");
            $(this).parents('tr').attr('bgcolor', 'green');
        });
        $('.closest').click( function (){
            alert("$(this).closest('tr').attr('bgcolor', 'blue');");
            $(this).closest('tr').attr('bgcolor', 'blue');
        });
    });
  </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>1</td><td class="parent1">parent, aca funciona</td>
        </tr>
        <tr>
            <td>1</td><td><a class="parent2" href="#">parent, aca no funciona el padre de 'a' es un 'td'</a></td>
        </tr>
        <tr>
            <td>2</td><td><a class="parents" href="#">parents</a></td>
        </tr>
        <tr>
            <td>3</td><td><a class="closest" href="#">closest</a></td>
        </tr>
        <tr>
                <td>3</td>
                <td>
            <table><tr>
                <td>
                    <a class="closest" href="#">closest dentro de un tr</a>
                </td>
            </tr></table>
        </tr>
        <tr>
                <td>3</td>
                <td>
            <table><tr>
                <td>
                    <div><a class="parents" href="#">parents dentro de un tr, desde el link pasa por el div despues por un tr y de ahi hasta el ultimo tr</a></div>
                </td>
            </tr></table>
        </tr>
    </table>
</body>
</html>

abcdefghi · #8 (**permalink**) 22/03/2010, 07:11

Cita:

Iniciado por Dany_s

si seleccionas un td podés ir al tr con parent, parents o closest pero depende de que tengas antes del td porque actuan diferente, cada uno tiene utilidad diferente

por ej: parent encuentra el tr si haces click en un td porque lo que le contiene antes a un td es un tr (el padre), pero si lo que buscas es un tr de una tabla principal y el td clickeado se encuentra en una tabla anidada ya no, va a encontrar solo el tr de la segunda tabla, u otra que puede ser que hagas click en un enlace y ahi el padre va a ser un td

parents si busca el padre y sigue buscando hasta hmmm ¿el abuelo? o sea busca un tr y si hay otro tr que lo contiene selecciona ese, o sea si clickeas en un enlace y le decis que busque un tr va a encontrar por mas que el enlace esté en un div después ese div esté en otro div y que a todo eso lo contenga un tr pero a la vez a ese tr lo contiene otra tabla y otra tabla y otra tabla jeje

closest busca el elemento mas cercano, o sea busca hasta el primer tr que lo contiene y listo

o sea que la mejor forma es parents

aca un ejemplo de lo que quise decir jeje

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        $('.parent1').click( function (){
            alert("$(this).parent().attr('bgcolor', 'red');");
            $(this).parent().attr('bgcolor', 'red');
        });
        $('.parent2').click( function (){
            alert("$(this).parent('tr').attr('bgcolor', 'blue');");
            $(this).parent('tr').attr('bgcolor', 'blue');
        });
        $('.parents').click( function (){
            alert("$(this).parents('tr').attr('bgcolor', 'green');");
            $(this).parents('tr').attr('bgcolor', 'green');
        });
        $('.closest').click( function (){
            alert("$(this).closest('tr').attr('bgcolor', 'blue');");
            $(this).closest('tr').attr('bgcolor', 'blue');
        });
    });
  </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>1</td><td class="parent1">parent, aca funciona</td>
        </tr>
        <tr>
            <td>1</td><td><a class="parent2" href="#">parent, aca no funciona el padre de 'a' es un 'td'</a></td>
        </tr>
        <tr>
            <td>2</td><td><a class="parents" href="#">parents</a></td>
        </tr>
        <tr>
            <td>3</td><td><a class="closest" href="#">closest</a></td>
        </tr>
        <tr>
                <td>3</td>
                <td>
            <table><tr>
                <td>
                    <a class="closest" href="#">closest dentro de un tr</a>
                </td>
            </tr></table>
        </tr>
        <tr>
                <td>3</td>
                <td>
            <table><tr>
                <td>
                    <div><a class="parents" href="#">parents dentro de un tr, desde el link pasa por el div despues por un tr y de ahi hasta el ultimo tr</a></div>
                </td>
            </tr></table>
        </tr>
    </table>
</body>
</html>

Dany, en realidad no puedo usar parent ya que cuando tengo una tabla con más de una fila o sea varios <tr> en vez de buscarme hasta el <tr> que contiene al elemento que dispara el evento, se va hasta el primer <tr> de la tabla.

Dany_s · #9 (**permalink**) 22/03/2010, 08:02

que? no entendi

si no podes usar parents fijate otro metodo, en el ejemplo que te di podes ver que usar

postea una tabla y decime donde hacer clic y que queres que seleccione

mayid · #10 (**permalink**) 22/03/2010, 09:24

$(this) hace referencia al elemento que clickeaste. Dentro de una funcion .click(), $(this) represetará a cualquier elemento html que tenga el evento asignado y haya sido clickeado.

... Vos usas algun evento, no?

juaniquillo · #11 (**permalink**) 22/03/2010, 16:41

yo también estoy un poco perdido de por que no puedes usar parent(). ¿Podrías dar un ejemplo de cuando pasa lo que dices?

abcdefghi · #12 (**permalink**) 22/03/2010, 16:55

Yo siempre para dumpear el contenido he utilizado .html() y como me han comentado es correcto que me devuelva desde <td>y su contenido</td> pero que en sí closest() contiene a tr como objeto.

Muchas gracias por el esfuerzo, igualmente algo no me funciona pero salvada la duda voy a verlo con detenimiento para ver cúal es mi error.

Saludos.

Dany_s · #13 (**permalink**) 22/03/2010, 18:56

y porqué no posteas la estructura de tu tabla y decinos que es lo que queres recuperar

porque hay varias formas pero siempre depende de la estrucutra, no es lo mismo usar parent para obtener un tr si antes del elemento que diste click hay un div
o parents(''tr) cuando hay varios tr anidados

abcdefghi · #14 (**permalink**) 23/03/2010, 20:21

Cita:

Iniciado por Dany_s

y porqué no posteas la estructura de tu tabla y decinos que es lo que queres recuperar

porque hay varias formas pero siempre depende de la estrucutra, no es lo mismo usar parent para obtener un tr si antes del elemento que diste click hay un div
o parents(''tr) cuando hay varios tr anidados

Mi pregunta original y que me tuvo dando vuelta por varios días era acerca de closest(), por eso una vez develado el misterio uno reniega sólo para no abusar de los demás, de todas maneras lo he dejado para ver el fin de semana ya que el error que me presenta es minusculo, se los planteo simplemente por si alguno le sirve tambien el caso, bienvenido.

La tabla que tengo es esta:

Código HTML:

<table>
<tr removeclass="filter" class="filter">
      <td></td>
      <td><a class="button"><span>Disparar</span></a></td>
</tr>
<tr removeclass="filter" class="filter">
      <td></td>
      <td><a class="button"><span>Disparar</span></a></td>
</tr>
<tr removeclass="filter" class="filter">
      <td></td>
      <td><a class="button"><span>Disparar</span></a></td>
</tr>
</table>

Quite lo que no es relevante para no confundirlos/cansarlos, el evento que dispara el cambio esta en el botón "disparar", la estructura en esa celda es la original, con el cambio de texto por supuesto.

Lo que necesito es que remueva la clase "filter" en cualquier elemento en que se encuentre la palabra "removeclass" siempre en sentido descendente desde <tr> hacia adelante hasta llegar a </tr>

Por lo que hago:

Código:

$('.button').click(function(){
        var b = $(this).closest('tr');

        $(b).find('*[removeclass]').each(function(){
                  $(this).removeClass($(this).attr('removeclass'));
        });
});

Yo pensaba equivocadamente que el problema era que closest() no incluia a tr, por lo que verán que el código anterior en realidad no realiza el cambio de "removeclass".

Sin embargo si hacen el problema no es en closest sino en find que empieza a recorrer el contenido buscando atributos pero no chequeando el elemento principal, en este caso <tr>.

Lo dejo planteado, por si alguno a tenido el problema, saludos.

juaniquillo · #15 (**permalink**) 24/03/2010, 08:52

Algunas cositas. No sé por qué está usando un tag html no válido "removeclass" en en <tr>. Yo pienso que lo mejor es usar elementos válidos, como class y id. Lo otro, como dijo Dany, puedes cambiar:

Código Javascript:

Ver originalvar b = $(this).closest('tr');

por

Código Javascript:

Ver originalvar b = $(this).parents('tr');

y vas a obtener el mismo resultado enteste caso, un objeto jQuery con el <tr> específico.

mayid · #16 (**permalink**) 24/03/2010, 09:26

Ya perdí el punto, pero si se trata de seleccionar varios elementos similares, jquery tiene herramientas de recorrido de arrays. Tambien de seleccion de jerarquias.

Dany_s · #17 (**permalink**) 24/03/2010, 16:45

Cita:

el problema no es en closest sino en find

problema no, hace lo que tiene que hacer jeje

find busca elementos desde el conjunto seleccionado para abajo, entonces ahí tenés 2 selecciones o 2 conjuntos, una del tr y otra de los elemtos que encontró find, entonces usas andSelf() que lo que haces es añadir a la seleccion todo lo que tenga la selección anterior a la actual y crear un solo conjunto

//primera selección el tr
$(this).closest('tr').
//Segunda selección todos los elemntos que tengan atributo 'removeclass'
find("*[removeclass]").
//Ahora andSelf se fija que la selección actual son los encontrados por find() y la anterior a esa es el closest('tr'), une a esas 2 y ahora hay un solo conjunto
andSelf().
//a todos esos le voy a eliminar la clase 'filter'
removeClass('filter');
//y termina no hace falta un each

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Prueba</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $('.button').click( function (){;
            $(this).closest('tr').find("*[removeclass]").andSelf().removeClass('filter');
        });
    });
    </script>
</head>
<style>
    table{border:1px}
    .filter {background-color:red}
    div.filter {background-color:blue}
    span.filter{background-color:green}
    .otro{background-color:yellow}
</style>
<body>

<table>
<tr removeclass="filter" class="filter">
      <td></td>
      <td><a class="button"><span  removeclass="filter" class="filter">Disparar (con remove y class)</span></a></td>
</tr>
<tr removeclass="filter" class="filter">
      <td><div removeclass="filter" class="filter">div con removeclass y  class filter</div></td>
      <td><a class="button"><span>Disparar</span></a></td>
</tr>
<tr removeclass="filter" class="filter">
      <td></td>
      <td><a class="button"><span class="otro">Disparar (no tiene class filter no borra fondo amarillo)</span></a></td>
</tr>
</table>

</body>
</html>

probá y sacá andSelf() y vas a ver como elimina el fondo azul y verde peo NO el fondo rojo del tr

abcdefghi · #18 (**permalink**) 24/03/2010, 21:00

Gracias dany, la verdad que me has ayudado con un problema que lo tenía hace varios días, la solución funcionó al 1000%, sinceramente no relacioné este problema con andSelf() ahora me siento un estupido

A disfrutar del karma que se lo merece. Saludos!

abcdefghi · #19 (**permalink**) 24/03/2010, 21:15

Cita:

Iniciado por mayid

Ya perdí el punto, pero si se trata de seleccionar varios elementos similares, jquery tiene herramientas de recorrido de arrays. Tambien de seleccion de jerarquias.

Cuando uno planteá un tema trata de hacerlo resumido, por eso no tiene sentido a simple vista, pero cuando junto todo, funciona de la manera esperada.

Gracias por el aporte y los consejo de todos siempre suman!. Saludos.