How does .closest () work in JQuery?

Question

How does .closest () work in JQuery?

Navigation

#1 by (4 votes)
#2 by (3 votes)

2

Hello, I would like to know if I am interpreting the command wrongly, or if I am doing something wrong in the implementation.

Translating freely, closest means "closest". But by clicking on an element and asking for closest() of it, it brings me the element itself.

In the following snippet, I wanted it to be alert in the counter of the previous line, but if you click on line 3, it returns undefined

$('tr').click(function () {
	
  var linha = $(this)
  var cont = linha.attr('contador')
  var ant = (cont - 1);
  
  alert(
  linha.closest('tr[contador="' + ant + '"]').attr('contador')
  )
	
});

tr{
  line-height: 40px
}

.vermelho{ background-color: red; }
.verde{ background-color: green; }
.azul{ background-color: blue; }
.amarelo{ background-color: yellow; }
.roxo{ background-color: purple; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablewidth="500px">
<tr id="tr-1" contador="1" class="vermelho"><td>teste 1</td></tr>
<tr id="tr-2" contador="2" class="azul"><td>teste 2</td></tr>
<tr id="tr-3" contador="3" class="verde"><td>teste 3</td></tr>
<tr id="tr-4" contador="4" class="amarelo"><td>teste 4</td></tr>
<tr id="tr-5" contador="5" class="roxo"><td>teste 5</td></tr>
</table>

The documentation on the site of JQuery reads as follows:

Travels up the DOM tree until it finds a match for the supplied selector

So (correct me if I'm wrong), he should find the top line, right? As it traverses the DOM above it. Or am I misunderstanding? How should .closest() work then?

jquery

asked by anonymous 12.04.2017 / 19:32

2 answers

3

Notice that the element where you attached the event handset is $('tr').click , that is a tr .

The closest searches but starts on its own.

At documentation says :

matches the selector by testing the element itself and traversing through its ancestors in the DOM tree

Translating freely:

Test the selector by testing the element itself and traversing the DOM through your ancestors / parents

12.04.2017 / 20:17

Store CSS in string What are the options for initializing a final variable in a Java class?

score 4 · Accepted Answer

The .closest() method finds the parent element that satisfies the condition of the selector, here has a brief explanation of closest() and also compares it with parent() , note that closest() starts searching the element itself.

In your case, all tr are at the same hierarchy level, unlike the table that would be the parent element of all other tr , so if you change your code for linha.closest('table') , it will find table .

Here is a snippet with an example from the w3schools site that clearly shows this hierarchical relationship.

$(document).ready(function() {
  $("span").closest("li").css({
    "color": "red",
    "border": "2px solid red"
  });

  $("span").closest("ul").css({
    "color": "green",
    "border": "2px solid green"
  });
});

.ancestors *{
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><bodyclass="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (second ancestor - second grandparent)
      <ul>ul (first ancestor - first grandparent)
        <li>li (direct parent - elemento PAI)
          <span>span</span>
        </li>
      </ul>
    </ul>
  </div>
</body>