Только выделенные элементы

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
м (Защищена страница «Только выделенные элементы» ([edit=sysop] (бессрочно) [move=sysop] (бессрочно)))
Строка 2: Строка 2:
<div class="titleOfArt">:selected<span class="nVers">1.0</span></div>
<div class="titleOfArt">:selected<span class="nVers">1.0</span></div>
-
Соответствует всем элементам со статусом selected. Это могут быть выбранные элементы типа <tt>&lt;option&gt;</tt>.
+
Соответствует всем элементам со статусом selected. Это могут быть выбранные элементы типа <tt>&lt;option&gt;</tt>. Для поиска выбранных <tt>checkbox</tt> и <tt>radio</tt> элементов, этот селектор НЕ подойдет.
<p class="smallTitleOfTable">
<p class="smallTitleOfTable">
Строка 13: Строка 13:
  |}
  |}
 +
Селектор <tt>:selected</tt> является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию <tt>querySelectorAll()</tt>. Для наилучшей производительности подойдет следующий вариант:
 +
<codeditor mode="javascript">
 +
// не самый быстрый вариант
 +
$( '.some-hint:selected' );
 +
 +
// эффективнее будет
 +
$( '.some-hint' ).filter(':selected');
 +
</codeditor>
 +
 +
==В действии==
 +
<codeditor>
 +
<!doctype html>
 +
<html>
 +
<head>
 +
  <style>
 +
    div {
 +
      color: red;
 +
    }
 +
  </style>
 +
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 +
</head>
 +
<body>
 +
 +
  <select name="garden" multiple="multiple">
 +
    <option>Flowers</option>
 +
    <option selected="selected">Shrubs</option>
 +
    <option>Trees</option>
 +
    <option selected="selected">Bushes</option>
 +
    <option>Grass</option>
 +
    <option>Dirt</option>
 +
  </select>
 +
  <div></div>
 +
 +
  <script>
 +
  $( "select" )
 +
    .change(function() {
 +
      var str = "";
 +
      $( "select option:selected" ).each(function() {
 +
        str += $( this ).text() + " ";
 +
      });
 +
      $( "div" ).text( str );
 +
    })
 +
    .trigger( "change" );
 +
  </script>
 +
</body>
 +
</html>
 +
</codeditor>
==Ссылки==
==Ссылки==
*[[Селекторы#Фильтры элементов форм|Остальные селекторы элементов формы]]
*[[Селекторы#Фильтры элементов форм|Остальные селекторы элементов формы]]
*[[Селекторы|Список всех селекторов]]
*[[Селекторы|Список всех селекторов]]
*[[Функция jQuery|$( ) &mdash; функция jQuery]]
*[[Функция jQuery|$( ) &mdash; функция jQuery]]
-
<stag ttype=selector alias=":selected"> выбранные элементы формы, отмеченные элементы формы, выделенные элементы формы, selected </stag>
+
<stag ttype=selector alias=":selected"> выбранные элементы формы, отмеченные элементы формы, выделенные элементы формы, selected, :selected </stag>

Версия 12:46, 26 февраля 2014

:selected1.0

Соответствует всем элементам со статусом selected. Это могут быть выбранные элементы типа <option>. Для поиска выбранных checkbox и radio элементов, этот селектор НЕ подойдет.

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

$(".formBox input:selected") вернет все выбранные элементы формы с классом formBox.

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

В действии

Ссылки

Поисковые ключи:
  • выбранные элементы формы
  • отмеченные элементы формы
  • выделенные элементы формы
  • selected
  •  :selected

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

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

за Comic Sans извени

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