How does . Closest() work in Jquery?

Asked

Viewed 6,031 times

4

Hello, I wonder if I’m misinterpreting the command, or if I’m doing something wrong in the implementation.

Freely translating, closest means "closer". But by clicking on an element and asking for the closest() of him, he brings me the very element.

In the following snippet, my intention was that he alert in the counter of the previous line, however, 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>
<table width="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>

To documentation on the website of JQuery says the following:

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? Since he walks the GIFT above him. Or am I misinterpreting? How the .closest() then?

jquery

  • the tr that Voce has are all siblings, so return undefined

2 answers

5


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

In your case, all the tr are at the same level of hierarchy, unlike table that would be the element father of all others tr, right if you change your code/ linha.closest('table'), he will find the table.

Here is a snippet with an example adapted from the site w3schools which 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>

<body class="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>

3

Notice that the element where you tied the event headphone is $('tr').click, namely a tr.

The Closest does a search but starting with itself.

In the documentation says:

Matches the selector by testing the element itself and traversing up through its ancestors in the DOM Tree

Freely translating:

test the selector by testing the element itself and crossing the GIFT through their ancestors/parents

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.