Despite its age, jQuery is still a popular library for manipulating the DOM.
In this article, we’ll look at some tips for working with jQuery.
Using jQuery .each() to Iterate Backwards
To call each to iterate through an array backward, we can use the reverse method to reverse the items.
For instance, we can write:
$($("li").get().reverse()).each(function() {
/* ... */
});
We get all the li elements, convert the Node list to an array with get .
Then we call reverse to reverse the items.
Now we can call each to iterate through each item in reverse.
We can also create our own reverse plugin to reverse the items.
For example, we can write:
$.fn.reverse = [].reverse;
$("li").reverse().each(function (i) {
$(this).text(`item-${i}`);
});
We created the reverse jQuery plugin with by getting the reverse method of the array and returning it.
Then we can call reverse with our jQuery object.
Then that returns an array and we can call each on it.
Use the Same Click Event for Multiple Elements with jQuery
We can add the same click handler to multiple elements by using the on method.
For instance, we can write:
$('.foo, .bar').on('click', onClick);
where onClick is an event handler function.
We listen to the click event on all elements with class foo and bar .
We can also use the on method to listen to multiple events with multiple elements.
For example, we can write:
$(document).on("click touchend", ".foo, .bar, .baz", function () {
//...
});
We listen to the click and touchend events with all elements with the classes foo , bar , and baz .
The function is the event handlers.
We call on on the document object so that we can do event delegation with it.
Differences Between Normal and Slim Package of jQuery
The slim jQuery package has several features removed from the normal jQuery package.
jQuery.fn.extend is removed fo we can’t create our own instance methods with the jQuery constructor.
jQuery.fn.load is also removed so we can’t load data from the ether and place the returned HTML into a given element.
jQuery.each is also removed, so we can’t iterate over array items with it.
jQuery.expr.filters.animated is removed so that we can’t use it for animations.
Ajax methods like jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, and jQuery.ajaxTransport are also gone.
XML parsing methods like jQuery.parseXML is also removed.
jQuery.easing , jQuery.animation and jQuery.speed aren’t included in the jQuery slim package.
These are animation effect packages that we may not need.
If we don’t use these methods, then we can use the jQuery slim package instead of the normal one.
jQuery Set Cursor Position in Text Area
We can set the cursor position in the text area by using the setSelectionRange or the createTextRange method.
For instance, we can write:
const setSelectionRange = (input, selectionStart, selectionEnd) => {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
const range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
We check if the setSelectionRange method and use that if it exists.
We call focus on the input and then call setSelectionRange to set the selection from by the start and end position.
With the createTextRange method, we can do the same thing.
It’s more complex that setSelectionRange .
We have moveEnd and moveStart to move the selection cursor to the position that we want.
And then we call select to make the selection.
Copy to Clipboard Using jQuery
We can create a function to copy to clipboard using jQuery.
The function would create an input, put the text in it, and then select the text.
Then we call execCommand with the argument 'copy' to copy the selection to the clipboard.
And then we remove the element that we created.
For instance, we can write:
const copyToClipboard = (element) => {
const $tempInput = $("<input>");
$("body").append($tempInput);
$tempInput.val($(element).text()).select();
document.execCommand("copy");
$tempInput.remove();
}
We created an input element, attached it to the body.
And then put whatever element’s text into the element as its value.
Then we call select in it to select all the text.
And then we call execCommand on it.
Once that’s done we remove the element by calling remove .
Conclusion
We can copy text to the clipboard by putting it in an input and then send the 'copy' command on it.
With jQuery, we can attach multiple events to multiple elements.
And we can create our own reverse jQuery plugin to reverse the item we iterate through.
