.is()


.is( selector )Возвращает: Boolean

Описание: Проверяет, соответствует ли хотя бы один из выбранных элементов определенному условию (оно зависит от заданного параметра: если задан селектор, то условием будет соответствие селектору; если задан объект jQuery, то условие — наличие в нем выбранных элементов; при передаче в .is() элемента DOM, будет проверяться его наличие среди выбранных элементов; и наконец если указать в качестве параметра функцию, то проверка условия будет возложена на нее).

  • Добавлен в версии: 1.0.is( selector )

    • selector
      Тип: Selector
      A string containing a selector expression to match elements against.
  • Добавлен в версии: 1.6.is( function )

    • function
      Тип: Function( Integer index, Element element ) => Boolean
      A function used as a test for every element in the set. It accepts two arguments, index, which is the element's index in the jQuery collection, and element, which is the DOM element. Within the function, this refers to the current DOM element.
  • Добавлен в версии: 1.6.is( selection )

    • selection
      Тип: jQuery
      An existing jQuery object to match the current set of elements against.
  • Добавлен в версии: 1.6.is( elements )

    • elements
      Тип: Element
      One or more elements to match the current set of elements against.

Unlike other filtering methods, .is() does not create a new jQuery object. Instead, it allows you to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers.

Suppose you have a list, with two of its items containing a child element:

1
2
3
4
5
<ul>
<li>list <strong>item 1</strong></li>
<li><span>list item 2</span></li>
<li>list item 3</li>
</ul>

You can attach a click handler to the <ul> element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked:

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

Now, when the user clicks on the word "list" in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be <strong> or <span>, respectively.

Prior to jQuery 1.7, in selector strings with positional selectors such as :first, :gt(), or :even, the positional filtering is done against the jQuery object passed to .is(), not against the containing document. So for the HTML shown above, an expression such as $( "li:first" ).is( "li:last" ) returns true, but $( "li:first-child" ).is( "li:last-child" ) returns false. In addition, a bug in Sizzle prevented many positional selectors from working properly. These two factors made positional selectors almost unusable in filters.

Starting with jQuery 1.7, selector strings with positional selectors apply the selector against the document, and then determine whether the first element of the current jQuery set matches any of the resulting elements. So for the HTML shown above, an expression such as $( "li:first" ).is( "li:last" ) returns false. Note that since positional selectors are jQuery additions and not W3C standard, we recommend using the W3C selectors whenever feasible.

Using a Function

The second form of this method evaluates expressions related to elements based on a function rather than a selector. For each element, if the function returns true, .is() returns true as well. For example, given a somewhat more involved HTML snippet:

1
2
3
4
5
6
7
8
<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>

You can attach a click handler to every <li> that evaluates the number of <strong> elements within the clicked <li> at that time like so:

1
2
3
4
5
6
7
8
9
10
11
$( "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" );
}
});

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