Блог

У меня есть 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");
 

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

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

Это можно сделать с помощью jQuery.closest()

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

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