在jQuery .each循环中访问元素

Question

Good Morning, This is my second self-composed js; apologies for the shallow depth of my knowledge and style. I suspect my current solution is somewhat bubble-gum and duct-tape.

I've got a list of events that have a start time and end time. They also have some assorted text data that cause the heights of the elements to vary. I'm using moment.js to convert times into appropriate widths and offsets.

I want to display the elements in as compressed a format as possible without overlapping. So far I've got it working for most sets of events by storing the corner variables and the comparing them in the next iteration of the loop; and then moving the current element down to the bottom of the previous element.

Is there a better way to do this that allows me to compare an event to all the previous events and position it accordingly?

                    $('.metro_event').each(function (i) {

        // Set Width and Left Offset based on start time and duration
        pixelScale = 1.25
        startTime = $(this).attr('start_date');
        startTime = moment(startTime);
        endTime = moment($(this).attr('end_date'));
        endTime = moment(endTime);
        duration = moment.duration(endTime - startTime);
        dayStart = moment(startTime).startOf('day');
        timeOffsex = moment.duration(startTime - dayStart);
        timeOffset = ((timeOffsex - 32400000)/60000) * 1.25;
        timeWidth = (duration/60000) * 1.25;
        $(this).css("width", timeWidth + "px");
        $(this).css("left", timeOffset + "px");

        //Get Height of Current for comparison
        currentHeight = $(this).height();
        currentBottom = currentHeight

        // Get Paramters for Previous Positioned Element

        lastWidth = $(".positioned").filter(':last').width();
        lastHeight = $(".positioned").filter(':last').height();
        lastLeft = $(".positioned").filter(':last').css("left");
        lastLeft = lastLeft.substring(0, lastLeft.length - 2);
        lastLeft = lastLeft * 1
        lastTop = $(".positioned").filter(':last').css("top");
        lastTop = lastTop.substring(0, lastTop.length - 2);
        lastTop = lastTop * 1
        lastRight = lastLeft + lastWidth;
        lastBottom = lastTop + lastHeight;

        // Compare Placement to Previous Positioned Element and Move Down as required

        if (timeOffset<lastRight && currentHeight>lastTop)
            {
            $(this).css("top", lastBottom + "px");
        }

        $(this).addClass('positioned');

        // Increment Height and Set Height of Containing Div

        $('#events').css("height", "300px");


    });

Answer 1

Don't use $(".positioned").filter(':last') (and don't use if over and over, but only once). I think what you really want is a variable containing the last iterated element, isn't it?

var last = null; // or $(".positioned").filter(':last') if there are already some
$('.metro_event').each( function() {
    var $this = $(this);
    // get attributes,
    // compute moments,
    // get css styles and position values

    // Now, use the variable
    last …
    // to get position values etc of the last element
    // style $this and
    $this.addClass("positioned");

    // then, after you're done, set "last" for the next iteration
    last = $this;
});
// maybe clean the global? variable last again with
last = null;