Нечетные элементы

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(В действии)
 
Строка 2: Строка 2:
<div class="titleOfArt">:odd<span class="nVers">1.0</span></div>
<div class="titleOfArt">:odd<span class="nVers">1.0</span></div>
-
Соответствует элементам с нечетными номерами позиций, в наборе выбранных элементов. (вариант с четными &mdash; [[Четные элементы|:even]])
+
Соответствует элементам с нечетными номерами позиций, в наборе выбранных элементов. (вариант с четными &mdash; [[Четные элементы|:even]]). Поскольку счет элементов начинается с 0, <tt>:odd</tt> будет соответствовать второму, четвертому и т. д. элементам.
<p class="smallTitleOfTable">
<p class="smallTitleOfTable">
Строка 12: Строка 12:
  |class="discr"|вернет все нечетные элементы, принадлежащие классу lBox.
  |class="discr"|вернет все нечетные элементы, принадлежащие классу lBox.
  |}
  |}
 +
 +
Селектор <tt>:odd</tt> является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию <tt>querySelectorAll()</tt>. В связи с этим, для улучшения производительности рекомендуется в начале найти базовые элементы, и уже к этому [[Функция jQuery|набору]] применить фильтрующую функцию <tt>[[Фильтрация выбранных элементов|.filter()]]</tt> с этим селектором:
 +
<codeditor mode="javascript">
 +
// найдем элементы с классом some-hint
 +
// и уже среди них будем искать нечетные:
 +
$( '.some-hint' ).filter( ':odd' );
 +
</codeditor>
==В действии==
==В действии==
 +
===Пример 1===
<p class="textAnderSource">
<p class="textAnderSource">
Элементы списка рассчитаются на "первый-второй", а так же примут чередующиеся цвета:
Элементы списка рассчитаются на "первый-второй", а так же примут чередующиеся цвета:
</p>
</p>
-
<advCode atype="editable" width="450px" height="250px">
+
<codeditor>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>
-
   <script src="http://code.jquery.com/jquery-latest.js"></script>
+
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <style>
   <style>
   #list{
   #list{
Строка 43: Строка 51:
   </ul>
   </ul>
<script>
<script>
-
     $("#list .item:odd").append(" второй!").css("background-color", "#eeeeee");;
+
     $("#list .item:odd").append(" второй!").css("background-color", "#cceecc");;
-
     $("#list .item:even").append(" первый!").css("background-color", "#cceecc");
+
     $("#list .item:even").append(" первый!").css("background-color", "#eeeeee");
</script>
</script>
</body>
</body>
</html>
</html>
-
</advCode>
+
</codeditor>
 +
 
 +
 
 +
===Пример 2===
 +
Найдем и выделим все нечетные параграфы:
 +
<codeditor demoWindowHeight="400px">
 +
<!DOCTYPE>
 +
<html>
 +
<head>
 +
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
  <script src="http://code.jquery.com/jquery-1.9.1.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{
 +
      background:url('/tags/images/matched.png') 0% 2% no-repeat;
 +
    }
 +
    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{
 +
      background:#e1e1e1 url('/tags/images/matched.png') 5% 5% no-repeat;
 +
    }
 +
    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{
 +
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
 +
    }
 +
    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>
 +
 
 +
  <script>
 +
    $('p:odd').addClass('result');
 +
  </script>
 +
 
 +
</body>
 +
</html>
 +
</codeditor>
==Ссылки==
==Ссылки==

Текущая версия на 16:02, 9 ноября 2013

:odd1.0

Соответствует элементам с нечетными номерами позиций, в наборе выбранных элементов. (вариант с четными — :even). Поскольку счет элементов начинается с 0, :odd будет соответствовать второму, четвертому и т. д. элементам.

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

$(".lBox:odd") вернет все нечетные элементы, принадлежащие классу lBox.

Селектор :odd является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию querySelectorAll(). В связи с этим, для улучшения производительности рекомендуется в начале найти базовые элементы, и уже к этому набору применить фильтрующую функцию .filter() с этим селектором:

Содержание

В действии

Пример 1

Элементы списка рассчитаются на "первый-второй", а так же примут чередующиеся цвета:


Пример 2

Найдем и выделим все нечетные параграфы:

Ссылки

Поисковые ключи:
  • нечетные элементы

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

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

за Comic Sans извени

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