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，这是在这个绝对的盒子下？

在第一个例子中，它带有文字：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帖子中提供了一个很好的简短函数：https://stackoverflow.com/a/7301852/6248169

屏幕上的宽度，高度和位置可以通过jQuery函数获得。然后你可以在这里为每个TD运行这个jquery函数来与你的绝对盒子进行比较。如果它发生碰撞，你在TD上设置一个类，然后你可以选择这个类，这样你就可以拥有DIV下的所有TD。

希望这些话足以让我们知道如何做到这一点，这里不需要完整的代码。

Answer 4

您还可以使用Element.getBoundingClientRect();函数调用来获取任何元素的位置坐标。然后继续将它们与绝对div的那些进行比较以找到重叠。它返回一个具有属性的对象 - top，right，bottom，left，width。链接到API

Answer 5

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

我建议使用＆＃34; id＆＃34;对于悬停元素。＆＃34;类＆＃34;用于几个元素。

jQuery：得到td元素，属于绝对div

5 个答案: