Единственные условные элементы в своих родителях

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
 
Строка 2: Строка 2:
<div class="titleOfArt">:only-of-type<span class="nVers">1.9</span></div>
<div class="titleOfArt">:only-of-type<span class="nVers">1.9</span></div>
-
<tt>:only-of-type</tt> &mdash; фильтрующий селектор (отфильтровывает элементы, выбранные с помощью предшествующей части селектора). Фильтрация происходит по следующему принципу:
+
Элемент соответствует селектору <tt>:only-child</tt>, если среди [[Взаимное расположение элементов#Соседние элементы|своих соседей]] нет элементов с таким же именем тега (именно именем тега).
-
* Элементы, выбранные по предшествующей части селектора разделяются на группы по общему родителю.
+
-
* Элементы, которые являются единственными внутри своих групп, попадают в результат.
+
<p class="smallTitleOfTable">
<p class="smallTitleOfTable">
Строка 12: Строка 10:
  |-class="row"
  |-class="row"
  |class="funct"|<span class="oneLine">$("div:only-of-type")</span>
  |class="funct"|<span class="oneLine">$("div:only-of-type")</span>
-
  |class="discr"|вернет все div-элементы, у которых среди [[Взаимное расположение элементов#Соседние элементы|соседей]] нет div'оф.
+
  |class="discr"|вернет все div-элементы, у которых среди соседей нет div'оф.
  |}
  |}
==В действии==
==В действии==
-
 
+
Найдем все элементы <tt>button</tt>, у которых среди соседних элементов нет других <tt>button</tt>'ов и установим этим элементам текст "Один".
 +
<codeditor>
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 +
  <style>
 +
  div {
 +
    width: 100px;
 +
    height: 80px;
 +
    margin: 5px;
 +
    float: left;
 +
    background: #b9e;
 +
  }
 +
  span {
 +
    padding: 2px;
 +
    margin: 3px;
 +
    line-height: 1.4;
 +
    border: 1px solid #000;
 +
  }
 +
  </style>
 +
</head>
 +
<body>
 +
 +
<div>
 +
  <button>Элемент</button>
 +
  <button>Элемент</button>
 +
</div>
 +
 +
<div>
 +
  <button>Элемент</button>
 +
</div>
 +
<div>
 +
  None
 +
</div>
 +
 +
<div>
 +
  <button>Элемент</button>
 +
  <span>Элемент</span>
 +
  <span>Элемент</span>
 +
</div>
 +
 +
<div>
 +
  <button>Элемент</button>
 +
</div>
 +
 +
<script>
 +
  $( "button:only-of-type" )
 +
    .text( "Один" )
 +
    .css( "border", "2px blue solid" );
 +
</script>
 +
 +
</body>
 +
</html>
 +
</codeditor>
==Ссылки==
==Ссылки==

Текущая версия на 08:22, 26 февраля 2014

:only-of-type1.9

Элемент соответствует селектору :only-child, если среди своих соседей нет элементов с таким же именем тега (именно именем тега).

Примеры использования:

$("div:only-of-type") вернет все div-элементы, у которых среди соседей нет div'оф.

В действии

Найдем все элементы button, у которых среди соседних элементов нет других button'ов и установим этим элементам текст "Один".

Ссылки

Поисковые ключи:
  • only-of-type
  •  :only-of-type

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

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

за Comic Sans извени

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