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

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Дочерние элементы)
(Родительский элемент)
Строка 488: Строка 488:
     $('p:first').addClass('result');
     $('p:first').addClass('result');
     $('p:first').parent().addClass('matched');
     $('p:first').parent().addClass('matched');
 +
 +
    $('li:eq(6)').addClass('result');
 +
    $('li:eq(6)').parent().addClass('matched');
 +
  </script>
 +
 +
</body>
 +
</html>
 +
</codeditor>
 +
 +
==Элементы-предки==
 +
Для некоторого элемента А, предками будут все элементы, которые его содержат. Это родительский элемент, родитель родителя и т. д. (туда будут входить и элементы <tt>body</tt>  и <tt>html</tt>, поскольку внутри них находятся все остальные элементы страницы).
 +
 +
Найти всех предков (или некоторых, удовлетворяющих необходимому условию) можно с помощью метода [[Поиск всех предков|<tt>.parents()</tt>]].
 +
 +
Найдем предков первого <tt>p</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').parents().addClass('matched');
     $('li:eq(6)').addClass('result');
     $('li:eq(6)').addClass('result');

Версия 17:46, 25 ноября 2013

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элементы-предки

Для некоторого элемента А, предками будут все элементы, которые его содержат. Это родительский элемент, родитель родителя и т. д. (туда будут входить и элементы body и html, поскольку внутри них находятся все остальные элементы страницы).

Найти всех предков (или некоторых, удовлетворяющих необходимому условию) можно с помощью метода .parents().

Найдем предков первого p-элемента на странице и выведим их имена (тегов):

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

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

за Comic Sans извени

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