2 
<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}のオブジェクトを受け取りたいと思います。

4

5 に答える 5

3

Idを使用する代わりに、その特定のtdのクラスを与えることができます

于 2012-11-08T11:54:35.087 に答える
3

要素を取得する1つの方法は、セルの座標と寸法を確認することです。

この2つの関数を使用します。

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のデータを保存する必要があります。次のステップでは、すべてのtddocument.getElementsByTagName("td"); ... を調べ、セルの左右がdivの長方形内にあるかどうかを「inCoords」で確認します。右下の角を左+幅と上+高さで計算して、この角がdivの下にあるかどうかを確認できるようにします。

これがお役に立てば幸いです。

あいさつ

于 2012-11-08T11:55:44.737 に答える
0

使用する

 $('#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');
于 2012-11-08T12:20:05.943 に答える
0 
$('#abs').siblings()

siblings（）：一致した要素のセット内の各要素の兄弟を取得します。オプションでセレクターによってフィルター処理されます。

こちらの完全なドキュメントを参照してください。

于 2013-01-02T06:01:30.323 に答える
-1

あなたはこのようなことを試すことができますか？

フィドル

PS。実際に質問に属するタグのみを参照してください

<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>
于 2012-11-08T11:52:47.617 に答える