trova elementi che sono impilati sotto (visivamente) un elemento in jquery

se ho 2 div (l’indice z non è assegnato), uno stratificato sopra, posso usare il riferimento al div superiore per trovare quale div è al di sotto di esso?

per quanto riguarda la struttura DOM, questi due div sarebbero fratelli. ma visivamente sono impilati l’uno sull’altro.

ecco un esempio:

 

che si traduce in questo: inserisci la descrizione dell'immagine qui

quindi sto cercando di capire, quando ho il div nero, box2, un modo per restituire box1 in jquery (usando selettori), perché box1 è sotto box2, usando jquery.

Controlla se box1 condivide la stessa posizione di un certo punto della pagina.


E solo perché sono un po ‘annoiato, l’ho fatto fantastico

http://jsfiddle.net/hunter/PBAb6/

 function GetAllElementsAt(x, y) { var $elements = $("body *").map(function() { var $this = $(this); var offset = $this.offset(); var l = offset.left; var t = offset.top; var h = $this.height(); var w = $this.width(); var maxx = l + w; var maxy = t + h; return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null; }); return $elements; } 

Forse qualcosa in questo senso … scollega l’elemento sotto il tuo cursore (in questo caso box1) e usa document.elementFromPoint per recuperare l’elemento successivo sotto quella posizione x, y .. grezzo esempio:

  var first_box = $('#box1');// more programmaticaly would be to use document.elementFromPoint to fetch the element under your cursor var first_box_offset = first_box.offset(); var x = first_box_offset.left; var y= first_box_offset.top + first_box.height(); var reattach_me = first_box.detach(); var second_box = document.elementFromPoint(x, y); $('body').append(reattach_me); 

Per quanto ne so, non c’è un selezionatore per questo. Probabilmente potresti scrivere una funzione per farlo. Vorrei scorrere su ogni elemento che precede il div in questione e verificare se il riquadro di delimitazione è nel div desiderato.

L’unico modo, come nel caso di esempio, per avere effettivamente un altro DIV su un altro è se viene dopo nel DOM. Quindi, la tua risposta semplice è che qualsiasi div è su un altro div se viene dopo esso nell’albero DOM. Si prega di fornire un esempio più illustrativo se questo è insufficiente.

È ansible illustrare che ciò funziona tentando di aggiungere un margine positivo a DIV1. Noterai che calcia DIV2 verso il basso. DIV2, tuttavia, quando viene assegnato un margine negativo verrà “strato” su DIV1. Nel tuo scenario utilizzando i margini e le div senza z-index o altri metodi di posizionamento, non è ansible che DIV1 si sovrapponga a DIV2.

EDIT basato sui commenti:

Il processo di capire se due elementi occupano lo stesso spazio è un gioco diverso. Un run down generale del tuo metodo sarebbe quello di ottenere la posizione delle coordinate per il tuo ancoraggio e ottenere la sua larghezza e altezza pure. Quindi, passa attraverso tutti i div e verifica se la posizione dell’ancora si sovrappone a una delle loro coordinate. Se si sovrappone a più div, prendi l’ultimo nel DOM come sarà sopra all’altro.

Per favore, non farmi scrivere un esempio di codice. 🙂