jQuery Girl
  1. jQuery Girl
  3. Détecter efficacement lorsque des éléments frères se chevauchent
Intereting Posts
Défilement infini pour un nombre fixe d’éléments li à l’aide de jQuery Javascript – comment lier ‘this’ dans un appel ajax à l’object littéral créer une variable de tableau jQuery scrollTop () ne fonctionne pas dans IE11 Vérifier si droppable contient déjà un autre élément déplaçable (jQuery UI) append du temps jquery ui datepicker dynamicment? La case à cocher jQuery click ne vérifie pas Firefox La fonction setTimeout n’arrête pas l’exécution? jQuery: enfant direct de $ (this) Dans jsfiddle, jquery validate plugin ne se déclenche pas Téléchargement de fichier rapide Script Intuit Anywhere rechargeant jQuery Comment sortinger la colonne par nom, ascendant et descendant Déterminez le nombre de caractères par ligne en fonction de la largeur (en fonction de la taille et de la taille de la police) «Utiliser ssortingct»; + jQuery.getScript () = le script ne peut pas être exporté vers un espace de noms global

Détecter efficacement lorsque des éléments frères se chevauchent

Exemple: 

 
 
 
 
 
 
 
 
 
 
 

“#big” est positionné absolument derrière une partie du “.small”, mais n’est pas un élément parent.

J’ai fait ceci: 

  var smallArray = []; var $big = $('#big'); var $bigPos = $big.offset(); $('div.small').each(function() { var $this = $(this); var $thisPos = $this.offset(); if( $thisPos.left >= $bigPos.left && $thisPos.left = $bigPos.top && $thisPos.top <= $bigPos.top+$big.outerHeight() ) smallArray.push($this); });

… mais cela semble kludgy. Est-ce que je manque certaines méthodes de JavaScript jQuery ou vanilla qui me permettront de le faire de manière plus élégante et plus efficace?

Merci d’avance pour toute aide que vous pouvez fournir.

Cette formule détectera si l’un des éléments spécifiés chevauche un élément cible: 

 function findIntersectors(targetSelector, intersectorsSelector) { var intersectors = []; var $target = $(targetSelector); var tAxis = $target.offset(); var t_x = [tAxis.left, tAxis.left + $target.outerWidth()]; var t_y = [tAxis.top, tAxis.top + $target.outerHeight()]; $(intersectorsSelector).each(function() { var $this = $(this); var thisPos = $this.offset(); var i_x = [thisPos.left, thisPos.left + $this.outerWidth()] var i_y = [thisPos.top, thisPos.top + $this.outerHeight()]; if ( t_x[0] < i_x[1] && t_x[1] > i_x[0] && t_y[0] < i_y[1] && t_y[1] > i_y[0]) { intersectors.push($this); } }); return intersectors; }

Voici un POC.

Cette question SO était très utile pour résoudre ce problème.