jQuery：获取绝对 div 下的 td 元素 [重复]

Question

jQuery：获取绝对 div（匹配位置）下的 td 元素（或其他元素）

假设我有这样的 html：

<table>
<tr>
  <td>1</td>
  <td>2</td>
</tr>

<tr>
  <td>3</td>
  <td>4</td>
</tr>

<tr>
  <td>5</td>
  <td>6</td>
</tr>
</table>

<div class="abs-hover">
*
</div>

css:

td {
  padding: 8px 20px;
  border: 1px solid #cecece;
}

.abs-hover {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 40px;
  height: 40px;
  background: rgba(140,200,120,0.2);
  border: 2px solid #1cabda;
}

https://jsfiddle.net/L63u02n6/

这个绝对容器可以改变它在页面上的位置，但是我怎样才能得到这个绝对框下的td呢？

在第一个示例中，它是带有文本的 td：1,2,3,4

我怎样才能做到这一点？任何想法

Answer 1

我写了一个小脚本来检查每个 td 是否在盒子里。

var objTop = $('.abs-hover').offset().top,
  objLeft = $('.abs-hover').offset().left,
  objWidth = $('.abs-hover').width(),
  objHeight = $('.abs-hover').height();

$('table tr td').each(function(e) {
  var self = $(this),
    selfLeft = self.offset().left,
    selfTop = self.offset().top,
    selfWidth = self.width(),
    selfHeight = self.height();
  if ((objLeft + objWidth) > selfLeft && (objLeft < (selfLeft + selfWidth) || objLeft > (selfLeft + selfWidth)) && (objTop + objHeight) > selfTop && objTop < (selfTop + selfHeight)) {
    console.log(self.text() +" is inside")    
  }

});

td {
  padding: 8px 20px;
  border: 1px solid #cecece;
}

.abs-hover {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 40px;
  height: 40px;
  background: rgba(140, 200, 120, 0.2);
  border: 2px solid #1cabda;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>

  <tr>
    <td>3</td>
    <td>4</td>
  </tr>

  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

<div class="abs-hover">
  *
</div>

Answer 2

您可以使用Document.elementFromPoint()

Document 接口的 elementFromPoint() 方法返回 指定坐标处的最顶层元素。

var j = $('.abs-hover').position();

elemtopLeft = document.elementFromPoint(j.top, j.left);
elemtopRIght = document.elementFromPoint(j.left + 44, j.top);
elembtmLeft = document.elementFromPoint(j.left, j.top + 44);
elembtmRight = document.elementFromPoint(j.left + 44, j.top + 44);

console.log(elemtopLeft, elemtopRIght, elembtmLeft, elembtmRight)

td {
  padding: 8px 20px;
  border: 1px solid #cecece;
}

.abs-hover {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 40px;
  height: 40px;
  background: rgba(140, 200, 120, 0.2);
  border: 2px solid #1cabda;
}

<script src=https://code.jquery.com/jquery-2.2.4.min.js></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>

  <tr>
    <td>3</td>
    <td>4</td>
  </tr>

  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

<div class="abs-hover">
  *
</div>

Answer 3

您需要为此进行碰撞检测，无论是在准备就绪时还是在某些事件之后。

这个 SO-post 中给出了一个很好的简短函数：https://stackoverflow.com/a/7301852/6248169

屏幕上的宽度、高度和位置可以通过 jQuery 函数获得。 然后，您可以在此处为每个 TD 运行此 jquery 函数，以与您的绝对框进行比较。如果它发生冲突，你在 TD 上设置一个类，然后你可以选择这个类，这样你就有了 DIV 下的所有 TD。

希望这些话足以让您了解如何执行此操作，此处不需要完整的代码。

Answer 4

您还可以使用Element.getBoundingClientRect(); 函数调用来获取任何元素的位置坐标。然后继续将它们与绝对 div 进行比较以找到重叠。它返回一个具有属性的对象 - 顶部、右侧、底部、左侧、宽度。链接到API

Answer 5

原生 JS：

function getBounds(el) {
    return {
    left: el.offsetLeft,
    top: el.offsetTop,
    right: el.offsetLeft + el.offsetWidth,
    bottom: el.offsetTop + el.offsetHeight
  };
}

let hoverBounds = getBounds(document.querySelector(".abs-hover"));

document.querySelectorAll("td").forEach((el) => {
  let elBounds = getBounds(el);
  if (
    (
      hoverBounds.left >= elBounds.left && hoverBounds.left <= elBounds.right ||
      hoverBounds.right >= elBounds.left && hoverBounds.right <= elBounds.right
    ) &&
    (
      hoverBounds.top >= elBounds.top && hoverBounds.top <= elBounds.bottom ||
      hoverBounds.bottom >= elBounds.top && hoverBounds.bottom <= elBounds.bottom
    )
  ) {
    console.log(el.innerText, "Yes");
  } else {
    console.log(el.innerText, "No");
  }
});

我建议使用“id”作为悬停元素。 “类”用于多个元素。