获取div位置下的元素：绝对使用jQuery [英] Get elements under div position:absolute with jQuery

问题描述

 < table id =droppableborder =1style =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 =absstyle =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> 
  

LIVE： http://jsfiddle.net/qYNjP/1/

我如何获得在div＃abs下的所有元素与jQuery？

在这个例子中，我想用td {d4，d5，d6，e4，e5，e6，f4，f5 ，f6}

解决方案

获取元素的一种方法是检查单元格的坐标和尺寸。 b
$ b

使用这两个函数：

$ p $函数getRectangle（obj）{

var off = obj.offset（）;

return {
top：off.top，
left：off.left，
height：obj.outerHeight（），
width：obj。 outerWidth（）
}; （x> rect.left&& x <（rect.left&& x< b
）

函数inCoords（x，y，rect） （rect.top + amp;<（rect.top + rect.height）））
return true;

返回false;
}

使用getRectangle，您应该先保存div的数据。在下一步中，您将浏览所有td的 document.getElementsByTagName（td）; ... ，并检查inCoords单元格的左边和顶部是否在div的矩形中。也许你用左+宽和顶+高计算右下角，这样你就可以检查这个角落是否在你的div下。

我希望这有帮助！

>

问候

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

​ ​ LIVE: http://jsfiddle.net/qYNjP/1/

How can i get all elements under div#abs with jQuery?

In this example i would like receive object with td {d4, d5, d6, e4, e5, e6, f4, f5, f6}

解决方案

one way to get the elements is to check the coords and dimensions of the cells.

use this 2 functions:

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;
}

with getRectangle you should first save the data for your div. In the next step you go through all td's document.getElementsByTagName("td"); ... and check with "inCoords" if the left and top of the cell is in the rectangle of the div. maybe you calc the bottom right corner with left + width and top + height so you can check if this corner is under your div.

i hope this helps!

greetings

这篇关于获取div位置下的元素：绝对使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！