is()

.is( селектор )

Описание: Проверяет текущий набор элементов на соответствие указанному селектору, элементу, или объекту jQuery и возвращает true, если хотя бы один элемент соответствует аргументам.

.is( селектор )

Добавлена в версию: 1.0

селектор

Строка

Строка, содержащая выражение для выбора элементов.

.is( function(индекс) )

Добавлена в версию: 1.6

function(индекс)

Функция

Функция, используемая в качестве теста для набора элементов. Она принимает один аргумент, индекс, которой является индексом элемента в наборе jQuery. В функции, это относится к текущему элементу DOM.

.is( объект jQuery )

Добавлена в версию: 1.6

объект jQuery

Объект

Существующий объект jQuery, для соответствия текущему набору элементов.

.is( элемент )

Добавлена в версию: 1.6

элемент

Элемент

Элемент, для соответствия текущему набору элементов.

В отличие от других методов фильтрации и обхода, .is() не создает новый объект jQuery. Вместо этого, он позволяет нам проверить содержание объекта jQuery без изменений. Это полезно в обратных вызовах, таких, как обработчики событий.

Предположим, что у нас есть список, два из его элементов, содержат дочерние элементы:

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>

  <li>list item 3</li>
</ul>

Мы можем приложить обработчик нажатия к элементу <ul>, а затем ограничить код на срабатывание только тогда, когда сам элемент списка, а не один из своих детей, нажат:

$('ul').click(function(event) {
  if ($(event.target).is('li') ) {
    $(event.target).css('background-color', 'red');
  }
});

Теперь, когда пользователь нажимает на список слов в первом пункте или где-нибудь в третьем пункте, нажатый элемент списка будет выделен красным фоном. Однако, когда пользователь щелкает на item 1 в первом пункте или в любом месте второго пункта, то ничего не произойдет, поскольку в этих случаях цель события была <strong> или <span>, соответственно.

До jQuery 1.7, в селекторе строк с позиционными селекторами, такими как :first, :gt(), и :even, позиционная фильтрация осуществляется с помощью объекта jQuery, переданного в .is(), не из первоначального документа. Таким образом, для HTML, показанного выше, такое выражение, как $("li:first").is("li:last") возвращает true, а $("li:first-child").is("li:last-child") возвращает false. Кроме того, ошибка в Sizzle заставляет многие позиционные селекторы работать не должным образом. Эти два фактора делают позиционные селекторы почти непригодными для использования в фильтрах.

Начиная с jQuery 1.7, выбор строк с позиционными селекторами применяет селектор против документа, а затем определяет, соответствует ли первый элемент текущего набора jQuery любому из полученных элементов. Таким образом, для HTML, показанного выше, такое выражение, как $("li:first").is("li:last") возвращает false. Отметим, что поскольку позиционные селекторы jQuery являются дополнением, а не стандартом W3C, мы рекомендуем использовать селекторы W3C, где это возможно.

Использование функции

Вторая форма этого метода вычисляет выражения, связанные с элементами, основанными на функции, а не на селекторе. Для каждого элемента, если функция возвращает true, .is() также возвращает true. Для примера, представим более сложный фрагмент HTML:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Вы можете прикрепить обработчик щелчка для каждого <li>, который оценивает число элементов <strong> внутри нажатого <li> следующим образом:

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

Примеры

Пример 1

Несколько способов использования is() внутри обработчика событий.

  $("div").one('click', function () {
      if ($(this).is(":first-child")) {
        $("p").text("It's the first div.");
      } else if ($(this).is(".blue,.red")) {
        $("p").text("It's a blue or red div.");
      } else if ($(this).is(":contains('Peter')")) {
        $("p").text("It's Peter!");
      } else {
        $("p").html("It's nothing <em>special</em>.");
      }
      $("p").hide().slideDown("slow");
      $(this).css({"border-style": "inset", cursor:"default"});
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

Несколько способов использования is() внутри обработчика событий.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    $("div").one('click', function () {
      if ($(this).is(":first-child")) {
        $("p").text("It's the first div.");
      } else if ($(this).is(".blue,.red")) {
        $("p").text("It's a blue or red div.");
      } else if ($(this).is(":contains('Peter')")) {
        $("p").text("It's Peter!");
      } else {
        $("p").html("It's nothing special.");
      }
      $("p").hide().slideDown("slow");
      $(this).css({"border-style": "inset", cursor:"default"});
    });


  });
  </script>

  <style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:4px outset; background:green; text-align:center; 
        font-weight:bolder; cursor:pointer; }
  .blue { background:blue; }
  .red { background:red; }
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow; 
      margin:3px; clear:left; display:none; }
  </style>
</head>
<body>
  <div></div>
  <div class="blue"></div>

  <div></div>
  <div class="red"></div>
  <div><br/><span>Peter</span></div>

  <div class="blue"></div>

  <p> </p>
</body>
</html>

Попробуйте сами

Пример 2

Возвращает true, так как родительский объект элемента ввода input является элементом формы.

    var isFormParent = $("input[type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

Возвращает true, так как родительский объект элемента ввода input является элементом формы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    var isFormParent = $("input[type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

  });
  </script>

  <style>div { color:red; }</style>
</head>

<body>
  <form><input type="checkbox" /></form>
  <div></div>

</body>
</html>

Попробуйте сами

Пример 3

Возвращает false, так как родительский объект элемента ввода input является элементом блока 'p'.

    var isFormParent = $("input[type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

Результат выполнения кода выше:

Попробуйте сами

Пример 3 - Полный код:

Возвращает false, так как родительский объект элемента ввода input является элементом блока 'p'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    var isFormParent = $("input[type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);
  });
  </script>

  <style>div { color:red; }</style>
</head>

<body>
  <form><p><input type="checkbox" /></p></form>

  <div></div>
</body>
</html>

Попробуйте сами

Пример 4

Альтернативное представление примера выше с использованием элемента, а не объекта jQuery. Проверка существующей коллекции альтернативного списка элементов. Синий, альтернативный список элементов закрывается вверх, в то время как другие становятся красными.

<!DOCTYPE html>
<html>
<head>
  <style>li { cursor:pointer; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
<script>
  var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
  $('li').click(function() {
    var $li = $(this);
    if ( $li.is( $alt ) ) {
      $li.slideUp();
    } else {
      $li.css("background", "red");
    }
  });
</script>

</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Пример 5

<!DOCTYPE html>
<html>
<head>
  <style>li { cursor:pointer; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
<script>
  var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
  $('li').click(function() {
    if ( $alt.is( this ) ) {
      $(this).slideUp();
    } else {
      $(this).css("background", "red");
    }
  });
</script>

</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Была ли эта информация полезной?

Да Нет

is()

.is( селектор )

.is( селектор )

.is( function(индекс) )

.is( объект jQuery )

.is( элемент )

Использование функции

Примеры

Пример 1

Пример 1 - Полный код:

Пример 2

Пример 2 - Полный код:

Пример 3

Пример 3 - Полный код:

Пример 4

Пример 5

Комментарии