Взаимное расположение элементов

Материал из JQuery

Версия 17:47, 24 ноября 2013

В этой статье собраны основные термины, которые используют для описания взаимного расположения элементов в дереве DOM (элементов на странице).

Дочерние элементы

Для некоторого элемента А, дочерними будут являться элементы, находящиеся непосредственно внутри А.

Например, для ul-элемента, дочерними являются все li-элементы внутри него, однако, то что находится внутри этих li-элементов, уже не будет являться дочерними элементами (однако будет являться потомками).

Найти дочерние элементы можно с помощью селектора ("parent > child") или с помощью метода .children()

Найдем все дочерние элементы в первом ul-элементе и шестом li-элементе на странице

~lt~!DOCTYPE~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{
      font:10pt Arial,sans-serif; 
      color:#555;
    }
    ul{
      float:left; 
      margin:3px; margin-left:15px; 
      padding:10px 10px 5px 10px; 
      border:2px solid #ddd;
    }
    ul.matched{
      position:relative; 
      left:-3px; 
      border:3px solid #8888ff;
    }
    ul.result{
      position:relative; 
      left:-3px; 
      border:3px solid #ff8888;
    }
    li{
      position:relative; 
      float:left; 
      margin:7px; 
      padding:2px; 
      width:60px; 
      height:60px; 
      background-color:#e1e1e1; 
      border:2px solid #e1e1e1;
    }
    li.matched{
      margin-left:6px; 
      margin-right:6px; 
      width:60px; 
      height:60px; 
      border:3px solid #8888ff;
    }
    li.result{
      margin-left:6px; 
      margin-right:6px; 
      width:60px; 
      height:60px; 
      border:3px solid #ff8888;
    }
    p{
      position:relative; 
      float:left; 
      width:16px; 
      height:16px;
      margin:2px; 
      background-color:#f4f4f4; 
      font-size:1pt;
    }
    p.matched{
      width:12px; 
      height:12px; 
      border:2px solid #8888ff;
    }
    p.result{
      width:12px; 
      height:12px; 
      border:2px solid #ff8888;
    }
    .matched_addit{
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
    }
    .srce{
      padding:16px 0; 
      text-align:center;
    } 
    .srce tt{
      color:#0088ff;
    }
    .tgName{
      position:absolute; 
      top:11px; left:45%; 
      font-size:8pt; 
      color:#b2ada1;
    }
    li .tgName{
      top:24px; 
      left:18px;
    } 
    li p .tgName{
      top:0; 
      left:1px; 
      font-size:7pt;
    }
    .top-element{
      padding-top:20px;
    }
    .clear{clear:both}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~

  ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – найденные элементы.~lt~/div~gt~
  ~lt~div class="clear"~gt~~lt~p class="matched"~gt~~lt~/p~gt~ – элементы, дочерние для найденных элементов.~lt~/div~gt~
  ~lt~script~gt~
$('ul:first').addClass('result');
$('ul:first>*').addClass('matched');

$('li:eq(8)').addClass('result');
$('li:eq(8)').children().addClass('matched');
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Элементы потомки

Потомками элемента A будут являться все элементы, лежащие внутри него. То есть все дочерние элементы, дочерние для дочерних элементов и т. д.

Найти все элементы потомки (для примера все потомки первого div-элемента на странице) можно так: $('div:first *'). Здесь для поиска используется нисходящий селектор, а так же селектор всех элементов (*).

Найдем все элементы-потомки для второго ul-элемента на странице:

~lt~!DOCTYPE~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{
      font:10pt Arial,sans-serif; 
      color:#555;
    }
    ul{
      float:left; 
      margin:3px; margin-left:15px; 
      padding:10px 10px 5px 10px; 
      border:2px solid #ddd;
    }
    ul.matched{
      position:relative; 
      left:-3px; 
      border:3px solid #8888ff;
    }
    ul.result{
      position:relative; 
      left:-3px; 
      border:3px solid #ff8888;
    }
    li{
      position:relative; 
      float:left; 
      margin:7px; 
      padding:2px; 
      width:60px; 
      height:60px; 
      background-color:#e1e1e1; 
      border:2px solid #e1e1e1;
    }
    li.matched{
      margin-left:6px; 
      margin-right:6px; 
      width:60px; 
      height:60px; 
      border:3px solid #8888ff;
    }
    li.result{
      margin-left:6px; 
      margin-right:6px; 
      width:60px; 
      height:60px; 
      border:3px solid #ff8888;
    }
    p{
      position:relative; 
      float:left; 
      width:16px; 
      height:16px;
      margin:2px; 
      background-color:#f4f4f4; 
      font-size:1pt;
    }
    p.matched{
      width:12px; 
      height:12px; 
      border:2px solid #8888ff;
    }
    p.result{
      width:12px; 
      height:12px; 
      border:2px solid #ff8888;
    }
    .matched_addit{
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
    }
    .srce{
      padding:16px 0; 
      text-align:center;
    } 
    .srce tt{
      color:#0088ff;
    }
    .tgName{
      position:absolute; 
      top:11px; left:45%; 
      font-size:8pt; 
      color:#b2ada1;
    }
    li .tgName{
      top:24px; 
      left:18px;
    } 
    li p .tgName{
      top:0; 
      left:1px; 
      font-size:7pt;
    }
    .top-element{
      padding-top:20px;
    }
    .clear{clear:both}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~

  ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – найденный элемент.~lt~/div~gt~
  ~lt~div class="clear"~gt~~lt~p class="matched"~gt~~lt~/p~gt~ – элементы-потомки для найденного элемента.~lt~/div~gt~
  ~lt~script~gt~
$('ul:eq(1)').addClass('result');
$('ul:eq(1) *').addClass('matched');
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Соседние элементы

Соседними элементами называют элементы, лежащие в общем элементе. находящиеся на одном уровне иерархии в дереве дом. Или другими словами, это все элементы, которые находятся в другом элементе.