jQuery esplora - metodo is()
Esempio
Restituisce false perché il genitore dell'elemento input è l'elemento p:
var isFormParent = $("input[type='checkbox']").parent();.is("form");
$("div").text("isFormParent = " + isFormParent);
Definizione e uso
is() verifica la presenza di elementi che corrispondono al selettore, all'elemento o all'oggetto jQuery fornito. Se almeno uno degli elementi corrisponde ai parametri forniti, restituisce true.
Sintassi
.is(selector)
| Parametro | Descrizione |
|---|---|
| selector | Valore di stringa, che contiene l'espressione di selezione dell'elemento che corrisponde. |
Spiegazione dettagliata
Diversamente da altri metodi di筛选, .is() non crea un nuovo oggetto jQuery. Invece, ci permette di verificare l'oggetto jQuery senza modificare il suo contenuto. Questo è utile all'interno di callback, come i gestori di eventi.
Supponiamo di avere una lista in cui due elementi contengono elementi figli:
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>elemento della lista 3</li> </ul>
Puoi aggiungere un gestore di eventi click all'elemento <ul> e limitare il codice in modo che venga attivato solo quando l'elemento della lista stesso, non i suoi elementi figli, viene cliccato:
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
});
Ora, quando l'utente clicca sulla parola "list" nel primo elemento della lista o su qualsiasi parola nel terzo elemento della lista, l'elemento della lista cliccato viene impostato con sfondo rosso. Tuttavia, quando l'utente clicca su "item 1" nel primo elemento della lista o su qualsiasi parola nel secondo elemento della lista, non avviene alcun cambiamento, poiché in questi casi, l'obiettivo dell'evento è <strong> è <span>.
Si prega di notare che per espressioni di selettore con筛选器posizionali, come :first, :gt() o :even, il筛选器posizionali è applicato all'oggetto jQuery passato a .is(), non al documento contenente. Pertanto, per l'HTML sopra, l'espressione $("li:first").is("li:last") restituisce true, ma $("li:first-child").is("li:last-child") restituisce false.
Usare la funzione
Un altro uso di questo metodo è valutare un'espressione di elementi correlati basata su una funzione piuttosto che su un selettore. Per ogni elemento, se la funzione restituisce true, .is() restituirà anche true. Ad esempio, ecco un pezzo di HTML leggermente più complesso:
<ul>
<li><strong>lista</strong> elemento 1 - una etichetta strong</li>
<li><strong>lista</strong> elemento <strong>2</strong> -
due <span>etichette strong</span></li>
<li>elemento della lista 3</li>
<li>elemento della lista 4</li>
<li>elemento della lista 5</li>
</ul>
Puoi aggiungere un gestore degli eventi click a ciascun <li> per calcolare il numero di elementi <strong>all'interno del <li> cliccato:
$("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");
}
});
