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

Материал из JQuery

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

Версия 16:05, 2 декабря 2013

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

за Comic Sans извени

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