This section will teach you how to use more than one selector, and it doesn't matter if they're of the same or different kind, in a single call. The goal of the task is to print on the console the length of the retrieved collections.
This task can be achieved by performing the following instructions:
Create a copy of the
template.htmlfile and rename it asmultiple-selectors-at-once.html.Inside the
<body>tag, add the following HTML markup:<h1 id="title" class="bold red">Multiple selectors at once</h1> <div id="container" class="wrapper"> This example shows you the use of Multiple selector. <p id="description" class="red">Using it you'll have better performance, so adopt it when possible.</p> <p id="note" class="green">This is a good note!</p> </div> <div class="wrapper"> <h2>jQuery is so cool!</h2> <p class="red">I'm yet another paragraph</p> </div>Edit the
<head>section of the page adding this code:<script> $(document).ready(function() { console.log($('#container, #note').length); console.log($('.wrapper, div').length); console.log($('p, h1.red, #title').length); }); </script>Save the file and open it with your favorite browser.
So far, we've seen four types of selectors: All, Id, Class, and Element. Now, it's time to see how we can use them in a single selection to apply the same effect or function. In this way, our website will gain in performance because the DOM is traversed only once. Thus, we'll have once traversing for the N used selectors, instead of N traversing, once for each selector.
To see the multiple selectors in action, in the second step, we've added a higher number of elements to the DOM. Some of them have an id, some have a class, others both and others just nothing. This will help us to use selectors of different type and to highlight the power of the multiple selectors.
To use it, we've to just add a comma after our selector. You can see it as the OR logical operator inside an expression. There isn't a limit for the usable selectors, therefore we can use as many of them as we like. Just remember that if an element has more than one match, it's retrieved once. jQuery takes care of wiping out all of the duplicates for us. Moreover, the order of the DOM elements returned may not be identical to our selectors, as they will be collected in order of appearance inside the document.
In the first statement of the anonymous function, we're asking to retrieve all of the elements having either id container or note. Then, we print the size of the collection inside the jQuery object accessing the length property. The line $('#container, #note') produces 2 as a result because jQuery retrieves <div id="container" class="wrapper"> and <p id="note" class="green">.
The second line requires elements having class wrapper plus all of the <div> instances. The first selector matches only <div id="container" class="wrapper"> while the second matches the two <div> instances of the page. Recalling what you've learned a few moments ago, jQuery will delete all of the duplicates for us. Thus, in this case too the printed value is 2 because one of the two <div> instances appears twice in the collection.
In the third and last statement, we used the Element selector to retrieve all of the paragraphs, the tag name together with the Class selector to retrieve the <h1> having class red, and the ID selector to retrieve the element having ID title. If the previous examples were clear enough, it isn't hard to understand that the console will print 4. In fact, the paragraphs found are three, there isn't a match for the second selector and the third picks the only <h1> of the page.