jQuery iteração - método .is()

Manual de referência de iteração jQuery

Exemplo

Retorna false, pois o pai do elemento input é o elemento p:

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

Experimente pessoalmente

Definição e uso

O método .is() detecta conjuntos de elementos com base em seletores, elementos ou objetos jQuery, e retorna true se pelo menos um dos elementos coincidir com os parâmetros fornecidos.

Sintaxe

.is(seletor)
Parâmetros Descrição
seletor Valor de string, contendo a expressão de seletor que coincide com os elementos.

Explicação detalhada

Diferente de outros métodos de filtragem, .is() não cria um novo objeto jQuery. Em vez disso, permite que façamos a detecção do objeto jQuery sem modificar o conteúdo do objeto jQuery. Isso é útil dentro de callbacks, como manipuladores de eventos.

Suponha que tenhamos uma lista onde dois itens contêm elementos filhos:

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>item da lista 2</span></li>
  <li>item da lista 3</li>
</ul>

Você pode adicionar um manipulador de clique ao elemento <ul> e limitar o código para que ele seja acionado apenas quando o item da lista em si, e não seus elementos filhos, for clicado:

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

Experimente pessoalmente

Agora, quando o usuário clicar na palavra "list" do primeiro item da lista ou em qualquer palavra do terceiro item da lista, o item clicado será configurado com fundo vermelho. No entanto, quando o usuário clicar em "item 1" do primeiro item ou em qualquer palavra do segundo item, não haverá nenhuma mudança, pois nos casos acima, o alvo do evento é <strong>é <span>.

Por favor, note que para expressões de seletores posicional, como :first, :gt() ou :even, a filtragem posicional é feita para o objeto jQuery passado para .is(), e não para o documento contido. Portanto, para o HTML acima, expressões como $("li:first").is("li:last") retornam true, mas $("li:first-child").is("li:last-child") retorna false.

Usando função

A segunda forma de uso deste método é avaliar expressões de elementos relacionados com base em funções, em vez de seletores. Para cada elemento, se a função retornar true, .is() também retornará true. Por exemplo, aqui está um fragmento HTML mais complexo:

<ul>
  <li><strong>lista</strong> item 1 - um tag strong</li>
  <li><strong>lista</strong> item <strong>2</strong> -
    dois <span>tags strong</span></li>
  <li>item da lista 3</li>
  <li>item da lista 4</li>
  <li>item da lista 5</li>
</ul>

Você pode adicionar um manipulador de clique a cada <li> para calcular o número de elementos <strong>internos ao <li> clicado:

$("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");
  }
);

Experimente pessoalmente

Manual de referência de iteração jQuery