jQuery итерация - метод .is()

Руководство по遍жению jQuery

Пример

Возвращает false, потому что родителем элемента input является элемент p:

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

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

Определение и использование

Метод .is() проверяет набор соответствующих элементов по селектору, элементу или объекту jQuery, и возвращает true, если по крайней мере один элемент из этих элементов соответствует заданным параметрам.

Грамматика

.is(selector)
Параметры Описание
selector Строковое значение, содержащее селектор выражение для соответствующих элементов.

Подробное описание

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

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

<ul>
  <li>list <strong>элемент 1</strong></li>
  <li><span>элемент списка 2</span></li>
  <li>элемент списка 3</li>
</ul>

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

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

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

Теперь, когда пользователь нажимает на слово "list" в первом списке или на любое слово в третьем списке, нажатый элемент списка будет установлен с красным фоном. Однако, если пользователь нажимает на "item 1" в первом списке или на любое слово во втором списке, не произойдет هیچ изменения, потому что в этом случае目标是 <strong>является</strong> <span>.

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

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

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

<ul>
  <li><strong>элемент</strong> списка 1 - один тег strong</li>
  <li><strong>элемент</strong> списка <strong>2</strong> -
    два <span>тега strong</span></li>
  <li>элемент списка 3</li>
  <li>элемент списка 4</li>
  <li>элемент списка 5</li>
</ul>

Вы можете добавить обработчик click к каждому <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");
  }
});

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

Руководство по遍жению jQuery