javascript - jQuery checking each element against each other element in a class -

(ty putvande , shanet pointing out wrong ')' removed, had repost question got answers related little mistake , not main question)

i'm having lot of difficulties constructing following in javascript:

for every element assemble_station class

check whether overlaps each other element assemble_station class

if does: check element has biggest left position of two, move element biggest left position location avoid collision

here's i've written

$(".assemble_station").each(function (i, firstobj) {     $(".assemble_station").each(function (i, secondobj) {         if ($(firstobj).overlaps($(".assemble_station").not(firstobj), secondobj)) {             if ($(firstobj).css("left") >= $(secondobj).css("left")) {                 $(secondobj).css("top", "98px");             }         }     }); }); 

here's jsfiddle uses code @ back: http://jsfiddle.net/nxwxu/6/

to sum question, i'm trying find best practice method doing described above. , far don't why current code isn't working. >.<

you can see of elements overlap if break code in jsfiddle , watch positions before moved same vertical position.

ty taking time try help

suggestions improve coding , debugging skills

your updated code (in resolved lack of overlaps function) failing because jquery plugins not supposed used in way. please consider reading creating jquery plugins, , as can javascript debugging before trying resolve kind of problem.

try develop debugging abilities doing of following in console after setting breakpoints (or using debugger statement in code):

• play relevant code step step
• check variables values
• go thru stacktrace
• put commands in console see how code behaves in context

for instance, resolve problem used jquery console:

> $(".assemble_station") // returned elements [visibility:hidden] tried: > $(".assemble_station:visible") // got same results, ended using: > $(".tasknameitem").remove() // checked again: > $(".assemble_station") // , results different :) 

and these done in console without having change code. can learn lot putting commands in console while code in breakpoint. in jsfiddle, remember change <top frame> result frame using dropdown @ bottom of console.

the actual problems in code

the problem changing overlaps jquery plugin, jquery plugins can called on many items @ same time. difficult adapt plugin work properly, , better off using original version.

but problem using original function works normal html elements, elements not simple (because hidden parts, , containers have positions while contents have sizes). had hack getposition function inside overlaps make work weird html:

var overlaps = (function () {     function getpositions( elem ) {         var obj = $( elem );         var pos = obj.position();         //hack: weird html force me use first child's dimensions         var child = obj.children(":first-child");          var width = child.width();         var height = child.height();         return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];     } 

take @ new code on how use overlaps function (in second each, i've removed not firstobj, every other object tested in previous loops using i1 + 1 starting point):

var stations = $('.assemble_station'); stations.each(function(i1, firstobj) {     stations.slice(i1 + 1).each(function(i2, secondobj) {         if(overlaps(firstobj, secondobj)) {             var obj1 = $(firstobj);             var obj2 = $(secondobj);             var objtomove = obj1.position().left >= obj2.position().left ? obj1 : obj2;             var newtop = objtomove.position().top + 18;             objtomove.css("top", newtop + 'px');         }     }); }); 

your other problem several elements on page sharing ids. if give element id, should element id in whole page. jquery won't work expected if don't comply basic html assumption. fixed removing (instead of hiding) titles , yellow bar (and doing before getting objects id), won't interfere collision detection.

the full solution

you can play jsfiddle here: http://jsfiddle.net/protron/nxwxu/8/