How to get the closest child of the clicked div

Question

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');
});

Answer 1

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>

Answer 2

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/

Answer 3

Is this what you want?

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

Answer 4

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.

Answer 5

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"));
    });