[英]Get elements under div position:absolute with jQuery
<table id="droppable" border="1" style="position: relative">
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
<td>f1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3
<div id="abs" style="position: absolute; height: 50px; width: 50px;background- color: red">asdasd</div>
</td>
<td>e3</td>
<td>f3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
</tr>
</table>
现场直播: http : //jsfiddle.net/qYNjP/1/
如何使用 jQuery 获取 div#abs 下的所有元素?
在这个例子中,我想接收带有 td {d4, d5, d6, e4, e5, e6, f4, f5, f6} 的对象
您可以为该特定 td 提供课程,而不是使用 Id
获取元素的一种方法是检查单元格的坐标和尺寸。
使用这两个功能:
function getRectangle (obj) {
var off = obj.offset();
return {
top: off.top,
left: off.left,
height: obj.outerHeight(),
width: obj.outerWidth()
};
}
function inCoords (x, y, rect) {
if ((x > rect.left && x < (rect.left + rect.width))
&& (y > rect.top && y < (rect.top + rect.height)))
return true;
return false;
}
使用 getRectangle 您应该首先保存 div 的数据。 在下一步中,您将浏览所有 td 的document.getElementsByTagName("td"); ...
document.getElementsByTagName("td"); ...
并使用“inCoords”检查单元格的左侧和顶部是否在 div 的矩形中。 也许你用左 + 宽度和顶部 + 高度计算右下角,这样你就可以检查这个角是否在你的 div 下。
我希望这有帮助!
问候
采用
$('#abs').siblings()
.siblings( [selector] ) 获取匹配元素集合中每个元素的兄弟元素,可选择由选择器过滤。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li.third-item').siblings().css('background-color', 'red');
或者你可以给类名
<td class="position"> d4 </td>
<td class="position"> d5 </td>
<td class="position"> d6 </td>
<td class="position"> e4 </td>
<td class="position"> e5 </td>
<td class="position"> e6 </td>
<td class="position"> f4 </td>
<td class="position"> f5 </td>
<td class="position"> f6 </td>
$('.position').css('background-color', 'red');
你可以试试这样的吗?
附注。 只引用实际属于问题的标签
<table id="droppable" border="1" style="float: left; clear: both">
<tr>
<div id="abs" style="float:left; height: 50px; width: 50px;background-color: red">asdasd</div><td>a1</td><td>b1</td><td>c1</td><td>d1</td><td>e1</td><td>f1</td></tr>
<tr> <td>a2</td><td>b2</td><td>c2</td><td>d2</td><td>e2</td><td>f2</td></tr>
<tr> <td>a3</td><td>b3</td><td>c3</td><td>d3</td><td>e3</td><td>f3</td></tr>
<tr> <td>a4</td><td>b4</td><td>c4</td><td>d4</td><td>e4</td><td>f4</td></tr>
<tr> <td>a5</td><td>b5</td><td>c5</td><td>d5</td><td>e5</td><td>f5</td></tr>
<tr> <td>a6</td><td>b6</td><td>c6</td><td>d6</td><td>e6</td><td>f6</td></tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.