Question

我有一个名为#container的父div，并且有许多孩子的公共类为.timescalebase。我的要求是当我点击我的父母div时，我想要最近的孩子。我不能将子ID用于click事件，因为它的宽度为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

使用jQuery if (deltaPosition.x < 0.0f && deltaPosition.x > 0.01f)方法查找所有子元素的位置，并与鼠标点击事件的pageX和pageY进行比较。

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

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

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

Answer 2

可能这是解决方案;

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

这是你想要的吗？

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

Answer 4

最近JQuery：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的遍历其祖先来获取与选择器匹配的第一个元素。 / p>

最近将寻找壁橱父母而不是孩子，你需要找到孩子。

工作fiddle以获得第一个孩子;

<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()选择匹配选择器的第一个元素，从DOM树开始，您将获得容器div本身。

Answer 5

在这种情况下，您可以使用以下代码：

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

如何获得被点击的div的最近的孩子

5 个答案: