Seleccione el primer hermano

Question

Estoy tratando de seleccionar el valor interno del primer hermano, usando jQuery, en un entorno en el que no puedo alterar el marcado html.

Tengo el siguiente:

<tr> 
    <td>3</td> 
    <td>bob</td> 
    <td>smith</td> 
    <td>bob@example.com</td> 
    <td> 
     <img src="bobsmith.png" onclick="doSomething()" /> 
    </td> 
</tr> 

Estoy tratando de obtener el valor de la primera <td> con lo siguiente:

function doSomething() { 
    var temp = $(this).parent().parent().children().filter(':first'); 
    alert("you clicked person #" + temp.html()); 
} 

Todo lo que consigo de esta es null.

He intentado varias combinaciones con la función .siblings() también, pero fue en vano.

¿Alguna idea?

Gracias,

Nota: me olvidó mencionar que la tabla del extracto es de se carga dinámicamente & refrescado de una llamada AJAX. Esto puede ser pertinente para las sugerencias que incluyen enlaces.

Solución: he ido con la siguiente solución, inspirada en la respuesta aceptada:

<tr> 
    <td>3</td> 
    <td>bob</td> 
    <td>smith</td> 
    <td>bob@example.com</td> 
    <td> 
     <img src="bobsmith.png" onclick="doSomething(this)" /> 
    </td> 
</tr> 

y para el javascript jQuery:

function startStopNode(el) { 
    var temp = $(el).parent().siblings(':first').html(); 
    alert("you clicked: " + temp); 
} 

Answer 1

$('td:first-child', $(this).parents ('tr')).html(); 

Este seleccionará el primer elemento de DT (: filtro de primer hijo) en el TR primario del imagen. parents() devuelve todos los elementos principales del elemento y filtramos los elementos principales para que solo se devuelvan los elementos TR.

tratar también la escritura de su imagen, así:

<img src="bobsmith.png" onclick="doSomething(this)" /> 

y su función, así:

function doSomething (imgEl) { 
} 

y utilizar imgEl en lugar de this

Answer 2

$('tr td:last-child img').click(function(){ 

    alert($('td:first-child',$(this).closest('tr')).text()); 

}); 

Answer 3

Me gustaría configurar una evento usando jQuery, pero eso depende totalmente de ti.

$("table td:last img").click(function() { 
    var firstTd = $(this).parents("tr").find("td:first").html(); 
    alert("you clicked person #" + firstTd); 
}); 

No importa qué, todavía se puede utilizar este ejemplo con su propio código:

function doSomething() 
{ 
    var firstTd = $(this).parents("tr").find("td:first-child").html(); 
    alert("you clicked person #" + firstTd); 
} 

---

que tienes razón. 'esto' no se está aprobando, debe editar el html para que funcione. O simplemente use jQuery en su lugar como se muestra arriba.

Answer 4

quizás esto ayudará a alguien. Esto es solo una parte de todo el artículo here.

La diferencia

Si desea utilizar esto para acceder al elemento HTML que está manejando el caso, debe asegurarse de que la palabra clave this se escribe realmente en la propiedad onclick. Solo en ese caso se refiere al elemento HTML en el que está registrado el controlador de eventos. Así que si lo hace

element.onclick = doSomething; 
alert(element.onclick) 

se obtiene

function doSomething() 
{ 
    this.style.color = '#cc0000'; 
} 

Como se puede ver, la palabra clave this está presente en el método onclick. Por lo tanto, se refiere al elemento HTML.

Pero si lo hace

<element onclick="doSomething()"> 
alert(element.onclick) 

que presentamos lo

function onclick() 
{ 
    doSomething() 
} 

Esto es simplemente una referencia a la función doSomething(). La palabra clave this no está presente en el método onclick, por lo que no se refiere al elemento HTML.

Answer 5

Tenemos una fila de la tabla donde una columna es la acción, otras columnas contienen datos. Una de las columnas contiene el código del producto (UPC). Por eso, utilizamos esta opción para visualizar el código de producto cada vez que alguien hace clic en un botón de acción:

var product_code = jQuery(obj).parents('tr').children('.upc').text(); 
alert('product code'+product_code); 

Esto funciona porque nuestros celdas de la tabla tienen clases, como por ejemplo 1919191911919 para cada fila.

Puede utilizar otros selectores de jQuery, sin embargo. Como .children ('# myid') si tiene atributos de identificación establecidos en la celda 19191919199191, así como cualquier número de otros selectores como .children (td: first) para obtener la primera celda en la misma fila.