Búsqueda de fila principal de entrada de texto de formulario

Question

Estoy tratando de usar atributos de datos en una tabla HTML para almacenar datos sobre un elemento que luego será utilizado en una llamada ajax, pero estoy teniendo problemas con mi selección jQuery cuando Intento recuperar los datos.

Esto funciona:

var listItemId = $(this).parent().parent().attr('data-id'); 

Sin embargo, el selector .parent().parent() es demasiado frágil - it'll romper si alguna vez cambio de estructura HTML.

Esto es lo que me gustaría hacer, pero está devolviendo undefined:

var listItemId = $(this).parent('.list-item').attr('data-id'); 

Mi HTML se parece a esto:

<tr class="list-item" data-id="1"> 
    <td> 
    <input value="Some text entered by the user" type="text" > 
    </td> 
</tr> 

¿Qué me falta?

Answer 1

internamente, jquery usa .closest para este tipo de cosas.

var listItemId = $(this).closest('tr').attr('data-id'); 

Por otra parte, si utiliza tablas anidadas (que nunca he visto, pero nunca se sabe), hay que seleccionar la primera 'tr' también. (sin embargo, es más útil para buscar divs que filas). Sin embargo, para la unificación de código, nunca uso a los padres cuando necesito más. De esta manera, los nombres de funciones implica su significado exactamente (padre más cercano), mientras que .parents() deja más espacio a la interpretación, y así reducir la legibilidad del código (OMI)

se refiere a rendimiento, son equivalentes (marque this jsperf)

último, se puede considerar un approache pura javasrcipt también: parentNode (por milla más rápido que cualquier otra cosa, si realmente necesita velocidad)

en su caso:

var listItemId = $(this.parentNode.parentNode).attr('data-id'); 

o

var listItemId = this.parentNode.parentNode.attributes['data-id'].value; 

NB: Los métodos puro JavaScript necesitan HTML válido para trabajar, a diferencia de la de su pregunta (cerrar la etiqueta de entrada, y agregar una tabla uno).

here is a little fiddle

Answer 2

tratar

var listItemId = $(this).parents('.list-item').attr('data-id'); 

parents() sube en el árbol hasta que coincida con el selector

Answer 3

sugeriría:

var listItemId = $(this).parents('tr').data('id'); 

El selector de clase es el más lento de todos los selectores de jQuery y debe evitarse a menos que no haya otra manera de ir a la información que necesita.

ACTUALIZACIÓN

que fija la sintaxis para hacer uso del método .data() correctamente. De esta manera solo funciona en la versión 1.4.3 o superior.

Answer 4

$(this).closest('tr').attr('data-id'); 

Ésta será la mejor solución para su problema. El código no dependerá de su estructura html, a menos que introduzca la nueva etiqueta <tr> entre