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

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Элементы потомки)
(Соседние элементы)
Строка 331: Строка 331:
== Соседние элементы ==
== Соседние элементы ==
-
Соседними элементами называют элементы, лежащие в общем элементе. находящиеся на одном уровне иерархии в дереве дом. Или другими словами, это все элементы, которые находятся в другом элементе.
+
Соседними элементами называют элементы, лежащие в общем элементе.
 +
 
 +
==Родительский элемент==
 +
Для некоторого элемента А, родительским будет элемент, внутри которого он непосредственно находится. В свою очередь, для этого родительского элемента, А, будет [[#Дочерние элементы|дочерним]].
 +
 
 +
Найти родительский элемент можно с помощью метода [[Поиск родительского элемента|<tt>.parent()</tt>]].
 +
 
 +
Найдем родительские элементы для первого <tt>p</tt>-элемента и седьмого <tt>li</tt>-элемента на странице:
 +
<codeditor demoWindowHeight="410px" isCodeClose="true">
 +
<!DOCTYPE>
 +
<html>
 +
<head>
 +
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 +
  <style>
 +
    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}
 +
  </style>
 +
</head>
 +
<body>
 +
  <tt class="tgName">‹ul›</tt>
 +
  <ul>
 +
    <li><tt class="tgName">‹li›</tt></li>
 +
    <li></li>
 +
    <li>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p><tt class="tgName">‹p›</tt></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <li></li>
 +
    <li></li>
 +
    <div class="clear" />
 +
  </ul>
 +
  <ul>
 +
    <li></li>
 +
    <li></li>
 +
    <li></li>
 +
    <li>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <li>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <div class="clear" />
 +
  </ul>
 +
  <ul>
 +
    <li>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <li></li>
 +
    <li></li>
 +
    <li></li>
 +
    <li></li>
 +
    <div class="clear" />
 +
  </ul>
 +
 
 +
  <div class="clear top-element"><p class="result"></p> – найденные элементы.</div>
 +
  <div class="clear"><p class="matched"></p> – родительские элементы, найденный элементов.</div>
 +
  <script>
 +
    $('p:first').addClass('result');
 +
    $('p:first').parent().addClass('matched');
 +
 
 +
    $('li:eq(6)').addClass('result');
 +
    $('li:eq(6)').parent().addClass('matched');
 +
  </script>
 +
 
 +
</body>
 +
</html>
 +
</codeditor>

Версия 18:41, 24 ноября 2013

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

Содержание

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

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

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

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

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

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

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

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

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

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

Соседними элементами называют элементы, лежащие в общем элементе.

Родительский элемент

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

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

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

От автора jquery.page2page.ru

 
Мини-игра про поход за продуктами во время карантина.

за Comic Sans извени

Личные инструменты