Working with a jQuery selection

Applying selectors and filters returns us a set of elements to which we can apply various properties and methods. Also, since the set of elements is an array, we can treat it like an array.

The number of items selected. The length property and the size method

The property length returns us the number of selected items:var num = $(“tr:nth-child(odd)”).length;

An alternative is to use the method size, which also returns the number of items selected:var num = $(“tr:nth-child(odd)”).size();

Getting an element

Since the data set returned during the selection process is actually an array, we can get the elements of the selection by index: var firstElement = $(“tr:nth-child(odd)”)[0];. For example:

$(function(){
    var array = $("tr:even");
    for(var i=0; i < array.length;i++) {
        console.log(i.toString()+". " +array[i].innerHTML);
    }
});

An alternative is to use the method get(index), which takes the element’s index as a parameter: var elem = $(“tr:even”).get(0);.

eq function

Another way to access an element is a function eq(index). This function takes the element index as a parameter and returns a new set consisting of one element at the given index. For example:

$(function(){
    var array = $("tr:even");
    array.eq(1).css('background-color', 'blue');
    array.eq(-1).css('background-color', 'blue');
});

The advantage of this approach is that we can use jQuery methods on the result of the eq function (for example, cssto set the style, as in this case).

In addition, we can pass a negative value to the function. In this case, the countdown will be made from the end.

Getting the first and last element

Since developers quite often had to get the last and especially the first element in their tasks, the jQuery developers added special methods for selecting them: last and, first respectively.

$(function(){
    var array = $("tr:even");
    var firstEl = array.first();
    console.log("The first element: " + firstEl.html());
    var lastEl = array.last();
    console.log("Last element: " + lastEl.html());
});

Iterating over the elements of the selection

In addition to iterating as a regular array in a loop, as in the above option, we can use a special method each:

$(function(){
    $("tr:even").each(function(index, elem){
        console.log(index + ". " + elem.innerHTML);
    });
});

An unnamed function is passed to the method each as a parameter, which takes two parameters: index- the index of the element in the set and elem- the element itself.

Element index

To determine the index of an element, jQuery uses the index(element). As a parameter, we pass the element whose index we want to determine:

$(function(){
    var array = $("tr:even");
    var firstEl = array.first();
    var index = array.index(firstEl);
    console.log(index);  
});

Also, the index method can take as a parameter the result of fetching a jQuery function:

$(function(){
    var array = $("tr");
    var index = array.index($("tr.tabhead"));
    console.log(index);
});

Getting a selector

With a property selector, we can get the selection selector:

$(function(){
    var array = $("tr:even");
    console.log(array.selector);  
});

add method and adding new elements

With the help of the method add, we can create a new set. This method has the following syntax options:

• add(selector): add elements matching the selector to the set
• add(selector, context): adding elements, but in this case, elements are searched within the context
• add(element): add an element to the set
• add(array of elements): add an array of elements
• add(html): add to the set the element represented by the html markup (in this case, the addition goes only to the set, not to the page)
• add(jQuery): adding an object that is the result of a jQuery function

For example, lets create an initial selection from the even rows of the table and add the first row from the odd rows of the table to it:

$(function(){
    var array = $("tr:even").add("tr:odd:first");
    //this expression is equivalent to the following
    // var array = $("tr:even, tr:odd:first");
});

At the same time, instead of a method, and we could use a set of selectors that would give us the same result.