jquery - tag - Seleccionar primer hermano

jquery next with class

Question

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

Tengo los siguientes

<tr>
<td>3</td>
<td>bob</td>
<td>smith</td>
<td>[email protected]</td>
<td>
<img src="bobsmith.png" onclick="doSomething()" />
</td>
</tr>

Estoy tratando de obtener el valor del primer <td> con lo siguiente:

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

Todo lo que obtengo de esto es null .

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

¿Algunas ideas?

Gracias,

Nota: olvidé mencionar que la tabla de la que proviene el extracto se carga y actualiza dinámicamente a partir de una llamada ajax. Esto puede ser pertinente para sugerencias que incluyen enlaces.

Solución: He optado por la siguiente solución, inspirada en la respuesta aceptada:

<tr>
<td>3</td>
<td>bob</td>
<td>smith</td>
<td>[email protected]</td>
<td>
<img src="bobsmith.png" onclick="doSomething(this)" />
</td>
</tr>

y para jQuery javascript:

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

Answer 1

Prepararía un evento usando jQuery, pero eso depende totalmente de usted.

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

Pase lo que pase, aún puedes usar este ejemplo con tu propio código:

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

Tienes razón. ''esto'' no se está pasando, necesita editar el html para que funcione. O simplemente use jQuery como se muestra arriba.

Answer 2

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). Así que usamos esto para mostrar el código del 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 nuestras celdas de tabla tienen clases, como 1919191911919 para cada fila.

Sin embargo, puedes usar otros selectores de jQuery. 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.

Answer 3

tal vez esto ayude a alguien Esto es sólo una parte de todo el artículo here .

La diferencia

Si desea usar esto para acceder al elemento HTML que maneja el evento, debe asegurarse de que esta palabra clave esté realmente escrita 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 haces

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

usted obtiene

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

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

Pero si lo haces

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

usted obtiene

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 hace referencia al elemento HTML.

Answer 4

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

Esto seleccionará el primer elemento TD (: filtro del primer hijo) en el TR principal de la imagen. parents() devuelve todos los padres del elemento y los filtramos para que solo se devuelvan los elementos TR.

También trata de escribir tu imagen como tal:

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

y tu función como tal:

function doSomething ( imgEl ) {
}

y usa imgEl lugar de this

Answer 5

$(''tr td:last-child img'').click(function(){
alert($(''td:first-child'',$(this).closest(''tr'')).text());
});