Get Liste der divs unter Mausposition

Question

Ich suche nach einer Möglichkeit, eine Liste von Divs unter der Maus zu erhalten, wenn die Maus über ein Container div ist. Etwas wie:

$('.container').mouseover(function(e){ ...getDivsAtThisPoint()... });

Art wie Document.elementFromPoint() außer „alle Elemente innerhalb eines bestimmten Behälters von Punkt“ (und aus dem ‚experimentellen‘ Stufe).

Vielleicht etwas mit Ereignis sprudelt durch jedes Kind div? Aber ich habe nicht herausgefunden, wie ich diese Arbeit machen soll.

Answer 1

ich diese jQuery-Erweiterung zu schaffen endete, angepasst von this link und Xufox Kommentar:

(function ($, document, undefined) { 
    $.fn.extend({ 
    /** 
    * @param {number} x The x-coordinate of the Point. 
    * @param {number} y The y-coordinate of the Point. 
    * @param {Element} until (optional) The element at which traversing should stop. Default is document.body 
    * @return {jQuery} A set of all elements visible at the given point. 
    */ 
    elementsFromPoint: function(x, y, until) { 
     until = this[0]; 

     var parents = []; 
     var current; 

     do { 
     current = document.elementFromPoint(x, y); 
     if (current !== until) { 
      console.log("current",current); 
      parents.push(current); 
      current.style.pointerEvents = 'none'; 
     } else { 
      current = false; 
     } 
     } while (current); 

     parents.forEach(function (parent) { 
      return parent.style.pointerEvents = 'all'; 
     }); 
     return $(parents); 
    } 
    }); 
})(jQuery, document); 

ich benutze es etwa so:

$('.availabilityOverlap').mouseover(function(e){ 
    console.log($('.availabilityOverlap').elementsFromPoint(e.pageX, e.pageY)); 
}); 

Es produziert genau die Ausgabe, die ich wollte: ein Array von jQuery-Elementen bis zum angegebenen Container, aber nicht inklusive.

Answer 2

Meinst du das? Und mit allen Elementen meinen Sie alle Nachkommen und nicht nur die direkten Nachkommen von div.container?

warum nicht verwenden .find ('*'), um alle Nachkommen von div.container mit der Maus darüber zu bekommen:

$('.container').mouseover(function(e){ 
 
    console.log($(this).find('*')) 
 
});

.container div { 
 
    padding: 10px; 
 
} 
 

 
.container div:nth-child(odd) { 
 
    background: #a3fecbef; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div> 
 
     <section>001</section> 
 
    </div> 
 
    <div> 
 
     <section>002</section> 
 
    </div> 
 
    <div> 
 
     <section>003</section> 
 
    </div> 
 
    <div> 
 
     <section>004</section> 
 
    </div> 
 
    <div> 
 
     <section>005</section> 
 
    </div> 
 
    <div> 
 
     <section>006</section> 
 
    </div> 
 
</div>