CODEWITHSUNDEEP
javascriptjqueryhtml
P. Frank
P. Frank

Reputation: 5745

Why closest() find first itself element before travesing tree

I looking for why closest() find first itself element before traversing tree.

For example: I would like fadeOut the parent div element when i click on children element, but the children element is too a div and so is the children who fadeOut

$(document).on("click", ".close", function() {
  $(this).closest("div").fadeOut();
});
.feed {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feed">
  <div class="close">
    X
  </div>
</div>

Why is itself element who fadeOut and no the parent div element?

I know parent() get the parent element, but closest() is supposed traversing elements tree.

Have you a concrete cases, where get itself is useful?

Upvotes: 7

Views: 1837

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240938

It's because the .closest() method traverses the DOM beginning with the current element. You may want the .parents() method instead since it will begin with the parent element.

$(this).parents("div").fadeOut();

It's worth noting that the .parents() method returns zero or more elements whereas .closest() will return zero or one element. Therefore you might want to chain .first() after the .parents() method in order to get the first match:

$(this).parents("div").first().fadeOut();


$(document).on("click", ".close", function() {
  $(this).parents("div").first().fadeOut();
});
.feed {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feed">
  <div class="close">
    X
  </div>
</div>

Alternatively, you could also just exclude the parent by selecting the parent element and then using .closest() like:

$(this).parent().closest("div").fadeOut();

However, it would be much better just to select the closest .feed element rather than any div: 

$(this).closest(".feed").fadeOut();


$(document).on("click", ".close", function() {
  $(this).closest(".feed").fadeOut();
});
.feed {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feed">
  <div class="close">
    X
  </div>
</div>

Upvotes: 8

StormRideR
StormRideR

Reputation: 1758

You must be more specific, closest() is used when you are not sure what element exactly will receive click (div itself, label inside, image or smth. else) but you want have always same action, so closest can point exactly same element (contrary to parent approach)

$(document).on("click",".close",function(){
  $(this).closest(".feed").fadeOut()
});
.feed{
  width:200px;
  height:200px;
  background:red;
  position:relative;
}
.close{
  position:absolute;
  top:0;
  right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="feed">
   <div class="close">
    X
   </div>
1
</div>
<br>
 <div class="feed close">
   <div class="close">
    X
   </div>
2
</div>

Upvotes: 2

isherwood
isherwood

Reputation: 61083

As has been said, closest() begins with the current element. Your selector is vague enough that it stops there.

It may be safer (and more widely useful) to target a specific container class rather than the immediate ancestor div. 

$(this).closest(".feed").fadeOut()

Upvotes: 4

Related Questions