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