jquery DOM расстояние между двумя узлами

Question

У меня есть html-страница с множеством вложенных элементов. Я пытаюсь найти расстояние DOM между двумя узлами, чтобы я мог выбирать визуальных братьев и сестер, даже если они не братья DOM.

<div class='root'> 
    <div class='wrapper'> 
     <div class='family brother'> 
     <div class='otherstuff'>Other Stuff</div> 
     </div> 
    </div> 
    <div class='wrapper'> 
     <div class='family sister'> 
     <div class='otherstuff'>More Stuff</div> 
     <div class='wrapper> 
      <div class='family nephew'> 
      <div class='otherstuff'>Yet more stuff</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

Так, с JQuery:

var root = $(".root"); 
var siblings = root.find(".family"); 

Но что отберет брат, сестра и племянник.

Я не могу использовать

var siblings = root.find(".wrapper>.family"); 

, потому что будет также соответствовать всем трем.

И я не могу использовать

var siblings = $(".root>.wrapper>.family"); 

, потому что могут быть и другие элементы оболочки в зависимости от шаблона.

Что я ищу: данный .brother под .root, скажите, если другой .family является «родным братом», вычисляя, если DOM (иерархическое) расстояние от .brother до .root соответствует расстоянию другого .family участник из .root. Результирующий набор должен содержать только .brother и .sister, но не.

Answer 1

Это может быть сделано путем JQuery.closest()

Она возвращает ближайший соответствующий элемент из вашего целевого элемента.

Читайте документацию здесь: http://api.jquery.com/closest/