的jQuery：获得TD元素，是在绝对的div

Question

的jQuery：获得TD元素（或其他元素），是在绝对DIV（匹配位置）

比方说，我有这样的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

我怎样才能做到这一点：在

第一个例子

它与文字TD？任何想法

Answer 1

您需要为此进行碰撞检测，无论是在准备好还是在某些事件发生后。

这个好淡功能在这里给出这个SO-后：https://stackoverflow.com/a/7301852/6248169

宽度，高度和位置在屏幕上可以使用jQuery的功能得到。 然后你可以在这里为每个TD运行这个jquery函数来与你的绝对盒子进行比较。如果碰撞，你在TD上设置一个班级，然后你可以选择这个班级，这样你就可以拥有DIV下的所有TD。

希望这些词对于一个想法是足够的如何做到这一点，在这里不需要完整的代码。

Answer 2

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

Answer 3

我写了一个小脚本，检查每个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 4

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

我建议悬停元素使用 “身份证”。 “类”用于几个元素。

Answer 5

可以使用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>