/ / jQuery ': tabbable' selector con .children () - javascript, jquery, jquery-ui

Selector jQuery ': tabbable' con .children () - javascript, jquery, jquery-ui

Estoy intentando escribir un par de eventos que responden a las pulsaciones de teclas en "documento" para manejar siempre la funcionalidad de tabulación correcta dentro de una ventana modal, es decir, mantener siempre el foco de la pestaña dentro del modal.

Tengo un jsFiddle en funcionamiento, pero esto supone que todos los elementos tabbable son hijos directos del contenedor modal usando

var $modalTabElements = $(modalID +">:tabbable");

http://jsfiddle.net/qodyp3jn/12/

Aquí está la misma demostración, excepto que ahora las entradas en el modal están anidadas en otra división La única diferencia aquí es el selector

var $modalTabElements = $(modalID).children(":tabbable");

http://jsfiddle.net/qodyp3jn/13/

¿El selector ": tabbable" no funciona con el método .children (), o hay algo más que me falta aquí?

Respuestas

2 para la respuesta № 1

.children() Solo devuelve hijos directos. Tú quieres .find() todos los descendientes tabbable:

var $modalTabElements = $(modalID).find(":tabbable");

Violín actualizado