CODEWITHSUNDEEP
javascriptjquery
manu p
manu p

Reputation: 159

How to get the closest child of the clicked div

I have a parent div named #container and have many children which have a common class of .timescalebase. My requirement is when I click in my parent div I want the nearest child. I can't use the child id for click event because its width is 0px.

<div id="container" style="width: 70%; margin-top: 15px; position: absolute;">
    <div class="timescalebase" id="1"></div>
    <div class="timescalebase" id="2"></div>
    <div class="timescalebase" id="3"></div>
</div>

 $(document).on('click', '#container', function (e) {
    base = $(this).closest(".timescalebase")
    baseid = base.attr('id');
});

Upvotes: 0

Views: 1582

Answers (5)

Serhat MERCAN
Serhat MERCAN

Reputation: 1098

May be this is the solution;

var ruler;
var nearestDiv;
$("#container").on("click",function (e) {
  ruler = 10000000;
  $(".timescalebase").each(function(i, a) {
    if (Math.abs(e.pageY - $(a).offset().top) < ruler) {
      ruler = Math.abs(e.pageY - $(a).offset().top);
      nearestDiv = a;
    }
  });

  var baseid = $(nearestDiv).attr("id");
  alert(baseid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="width: 70%; margin-top: 15px;">
  <div class="timescalebase" id="a1">A....</div>
  <br/>
  <br/>
  <div class="timescalebase" id="a2">B....</div>
  <br/>
  <br/>
  <div class="timescalebase" id="a3">C....</div>
  <br/>
  <br/>
</div>

Upvotes: 1

Anil
Anil

Reputation: 3752

Closest from JQuery :For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Closest will look for closet parent not child, you need to find child.

Working fiddle to get first child;

<div id="container" style="width: 70%; margin-top: 15px; position: absolute;">
click on me
    <div class="timescalebase" id='1'></div>
    <div class="timescalebase" id='2'></div>
    <div class="timescalebase" id='3'></div>
</div>
 $(document).on('click', '#container', function (e) {
    var base = $(this).find(".timescalebase").first();
    var baseid = base.attr('id');
    alert(baseid);
});

closest() selects the first element that matches the selector, up from the DOM tree, you will be getting the container div itself.

Upvotes: 0

vyas karnav kumar
vyas karnav kumar

Reputation: 73

In such case you can use code below :

   $("#container").on("click", function ()
     {
      //if required first div
    alert($(this).find(".timescalebase:eq(0)").attr("id"));
      //if required second div
    alert($(this).find(".timescalebase:eq(1)").attr("id"));
      //if required third div
    alert($(this).find(".timescalebase:eq(2)").attr("id"));
    });

Upvotes: -1

Hemal
Hemal

Reputation: 3760

Is this what you want?

$(document).on('click', '#container', function (e) {
    var closestChild = $(this).find(".timescalebase:first");
});

Upvotes: 0

Seb Cooper
Seb Cooper

Reputation: 574

Use jQuery offset() method to find the position of all the child elements and compare to pageX and pageY of the mouse click event.

http://api.jquery.com/offset/

http://api.jquery.com/event.pageX/

http://api.jquery.com/event.pageY/

Upvotes: 1

Related Questions