Kollision mit mehreren Elementen (jede Funktion?)

Question

ich ein div haben ("#basket"), die viele Elemente mit der gleichen Klasse fangen sollte (".food")

function collision($div1, $div2) { 
     var x1 = $div1.offset().left; 
     var y1 = $div1.offset().top; 
     var h1 = $div1.outerHeight(true); 
     var w1 = $div1.outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 
     var x2 = $div2.offset().left; 
     var y2 = $div2.offset().top; 
     var h2 = $div2.outerHeight(true); 
     var w2 = $div2.outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 
     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; 

     var value = Number(($div1).attr("data-value")); 
     $("#counter").html(parseInt($("#counter").html()) + value); 

     function getsmall() { 
     $div1.remove(); 
     //$div1.stop().animate({width: "0px",height:"0px"}, 200, function(){}); 
     } 
     getsmall(); 
} 


    window.setInterval(function() { 
     var basket = $('#basket'); 
     var food_1 = ('#food_1'); // classname .food 
     var food_2 = ('#food_2'); // classname .food 
     collision($(food_1), $(basket)); 
     collision($(food_2), $(basket)); 
    }, 200); 

wird es mehr als 20 der .food sein und i möchte nicht so viele Code schreiben, wenn ich ids jedes Elements verwende.

Die Funktion funktioniert gut mit zwei eindeutigen Elementen (zwei IDs), aber nicht mit einem Element mit einer ID und mehr als 20 Elementen mit nur Klassennamen.

Wie kann die Funktion collision auf die #basket ausgeführt werden und viele Elemente mit Klassenname .food?

Answer 1

können Sie verwenden, um die each Funktion, es durchläuft alle Elemente in der jQuery-Objekt:

window.setInterval(function(){ 
    var basket = $('#basket'); 
    var food = $('.food'); 
    // Here comes the magic 
    food.each(function(){ 
     collision($(this), $(basket)); 
    }); 
}, 200); 

Answer 2

foods=document.getElementsByClass("food"); 
foods.forEach(function(food){ 
    collision(basket,food); 
}); 

die firstline speichert eine Sammlung von Elementen (wie ein Array), die die Klasse Essen innerhalb der variablen Lebensmittel haben. Jetzt können Sie durch (forEach) Schleife und rufen Sie Ihre Kollisionsfunktion für jede Korb Lebensmittelkombination.