Tengo un código con muchos submenús que comparten el mismo nombre de clase.

Aquí hay una estructura:

.menu
  .sub-menu
  .sub-menu
    .sub-menu
    .sub-menu
  .sub-menu
    .sub-menu
      .elem
      .elem
  .sub-menu

Tenga en cuenta que.sub-menu Puede haber niveles infinitos de profundidad.

Entonces, ¿cómo puedo lograr esto: cuando.elem se hace clic, quiero desplazar el DOM hacia arriba hasta que la parte superior.sub-menu Se alcanza y se le aplica un estilo. Estoy consciente de.closest() y.parent() y.find(), pero no tengo idea si jQuery tiene características tales como.topMost(selector)?

La única forma en que puedo pensar es tal vez ejecutando un bucle y atravesando.closest('.sub-menu') del nuevo elemento hasta que su longitud sea cero (no hay más padres con esta clase, por lo que debe ser el más alto). Sin embargo, creo que debería haber un enfoque más práctico para esto.