2017-06-14 36 views
2

jQuery unter absoluten div sind: td-Elemente erhalten (oder andere Elemente), diejQuery: td-Elemente erhalten, die

unter absoluten div (Match-Position) sind wir sagen, dass ich eine solche HTML haben:

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

diese absolute Behälter ist es ändern kann Position auf der Seite, aber wie kann ich td bekommen, die unter dieser absoluten Box sind?

in erstem Beispiel ist es mit Text td: 1,2,3,4

Wie kann ich das erreichen? Irgendwelche Ideen

+0

ähnliche Frage [hier] (https://stackoverflow.com/questions/13288472/get-elements-under-div-positionabsolute-with-jquery) –

Antwort

0

Sie benötigen eine Kollisionserkennung für diese entweder bereit oder nach einem Ereignis.

Eine gute kurze Funktion dafür ist hier in dieser SO-post gegeben: https://stackoverflow.com/a/7301852/6248169

Breite, Höhe und Position auf dem Bildschirm kann mit jQuery-Funktionen zu erhalten. Dann können Sie diese jquery Funktion hier für jeden TD ausführen, um mit Ihrer absoluten Box zu vergleichen. Wenn es kollidiert, legen Sie eine Klasse auf dem TD fest und anschließend können Sie über diese Klasse auswählen, so dass Sie alle TDs haben, die unter dem DIV sind.

Hoffe, diese Worte sind genug für eine Idee, wie dies zu tun ist, und hier ist kein vollständiger Code erforderlich.

0

Sie können auch Element.getBoundingClientRect(); Funktionsaufruf verwenden, um die Positionskoordinaten eines Elements zu erhalten. Dann vergleichen Sie sie mit denen des absoluten Div, um eine Überlappung zu finden. Es gibt ein Objekt mit Attributen zurück - oben, rechts, unten, links, Breite. Link zu der API

1

Ich schrieb ein kleines Skript, das überprüft, ob jeder td in der Box ist.

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>

0

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

Ich schlage vor, für das Schwebeelement Verwendung "id". "Klasse" für mehrere Elemente verwenden.

1

können Document.elementFromPoint()

verwenden

Die elementFromPoint() Methode der Dokumentenschnittstelle des oberste Element an den angegebenen Koordinaten zurückgibt.

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>