The is Jquery is used to check whether the selected element corresponds to a particular element.
This function can be called by passing different parameters:
Passing a dial
When a dial passes the is checks if the element you have matches the selector passed. A simple example of this would be $(this).is(".premiado") checking whether the current element, the $(this) corresponds to the class premiado. It is important to mention that the selector can be much more elaborate including all types of selectors supported in both Jquery and CSS3.
Example of is based on a class:
$("li").on("click", function(){
if ($(this).is(".premiado")){
console.log("li premiado!");
}
else {
console.log("li normal");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Clique nos vários li's
<ul>
<li>1</li>
<li>2</li>
<li class="premiado">3 (premiado)</li>
<li>4</li>
<li>5</li>
</ul>
Passing an Object
It is also possible to check if one element corresponds to another you have stored in an object. This general rule implies that you previously saved an element with something like let elemento = $(this); and then further to the forehead if it matches doing $(...).is(elemento).
With the passage of an object it is easy to assemble an example that tells you whether you clicked on the last element or on a different one:
let ultimo;
$("li").on("click", function(){
if ($(this).is(ultimo)){
console.log("li é o mesmo que o anterior");
}
else {
console.log("li diferente");
}
ultimo = $(this); //o ultimo passa a ser este elemento
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Clique nos vários li's, e mais que uma vez no mesmo
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Passing Function
Although much less common it is also possible to pass a function that tells you whether or not it corresponds to the element. The corresponding is done through what the function returns, being that true does the is match and false does not match. In this function you can implement any logic you want.
Usually this form takes the following shape:
if ($(this).is(function(){
//função para avaliar se é ou não retornando um booleano
}){
//código para executar quando é
}
Example of a is that checks if the clicked element matches one that has a specific text:
$("li").on("click", function(){
if ($(this).is(function(){
return $(this).text() == "5";
})){
console.log("li com texto 5");
}
else {
console.log("li com texto diferente de 5");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Clique nos vários li's
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
In this case you can also use a Arrow Function to simplify the function code, transforming it into:
if ($(this).is(() => $(this).text() == "5"){
console.log("li com texto 5");
}
Code shown in question
If you look at the code that you have in the question and my example of passing an object you will see that it is the same. The code that checks if the clicked element is different from the last one that was clicked:
if(!$(this).is($lastClicked)){
Will do various things and save the last clicked as the current:
$lastClicked = $(this);
Also stores changes if there is a last one (first click has no last):
if($lastClicked !== undefined){
savePendingEdition($lastClicked);