Podrías realizar la búsqueda con ayuda de un bucle que vaya desde el primer elemento padre de la caja de texto hasta la raíz del documento o el límite que especifiques. En la librería jQuery, existe un método llamado
parents con el cual puedes obtener a todos los elementos padre del elemento indicado o solo a los que desees encontrar, ya sea por el tipo de elemento, id o clase.
Como me interesó el tema, elaboré un pequeño, limitado pero funcional método con características muy similares al del que menciono.
Código Javascript
:
Ver originalwindow.Element.prototype.parents = function(){
var target = arguments.length ?
document.querySelectorAll(arguments[0]) :
document.querySelectorAll("*"),
ancestors = [],
list = [].slice.call(target), i;
for (i = this.parentNode; i != document; i = i.parentNode)
if (list.indexOf(i) > -1) ancestors.push(i);
return ancestors.length > 1 ? ancestors : ancestors[0];
};
var foo = document.querySelector("#foo"); //Toma al elemento de id 'foo'
foo.parents("tr").style.background = "red"; //Pinta de rojo el fondo de la fila en la que se encuentra el elemento
console.log(foo.parents("tr").rowIndex); //Muestra el número de fila en la que se encuentra el elemento
Como te comenté, busco desde el primer elemento padre del elemento en cuestión hasta que lleguemos a la raíz del documento (
<html>) y, al final de cada iteración, tomaremos al elemento padre del elemento actual. Previamente, tomaré al conjunto de elementos que coincidan con el tipo de elemento que estoy buscando, en este caso, filas de una tabla, pero si no se especifica el tipo de elemento a buscar, se toman a todos. Como el método
querySelectorAll devuelve una lista de nodos y no un array para poder utilizar alguno de los métodos de búsqueda de JS, lo
convierto en un array utilizando el método
slice.
En el bucle, utilizo el método
indexOf para buscar a los elementos en la lista que coincidan con el elemento padre actual en la iteración, en otras palabras, en el bucle, estamos iterando a los elementos padre del elemento clave (la caja de texto), mientras que, en el array
list, tengo ya sea a todos los elementos del documento, a todos los elementos cuyo tipo de elemento o clase sean igual al especificado o al elemento cuyo
id sea el que se indicó. En caso de darse la coincidencia en cada búsqueda, se asigna al elemento encontrado en el array
ancestors y, finalizado el bucle, se devuelve dicho conjunto, si es que tiene a más de un elemento, o solo al elemento encontrado, en caso de que —obviamente— sea solo uno.
Como el método
indexOf para arrays funciona en todos los navegadores excepto en versiones anteriores a IE9, te sugiero implementar
este algoritmo al inicio del archivo JS. Y lo mismo va por el método
querySelectorAll en caso de que desees que esto funcione en versiones anteriores a IE8, pudiendo evitar el inconveniente de la compatibilidad implementando
este algoritmo.
DEMO
Saludos