Javascript 访问jQuery中的元素。每个循环

早上好，这是我第二次自作主张；抱歉我的知识和风格肤浅。我怀疑我目前的解决办法是用泡泡糖和胶带

我有一个有开始时间和结束时间的事件列表。它们还有一些分类文本数据，这些数据会导致元素的高度发生变化。我使用moment.js将时间转换为适当的宽度和偏移量

我希望以尽可能压缩的格式显示元素，而不重叠。到目前为止，通过存储角点变量并在循环的下一次迭代中比较它们，我已经让它在大多数事件集上工作；然后将当前元素向下移动到上一个元素的底部

有没有更好的方法可以让我将一个事件与之前的所有事件进行比较，并对其进行相应的定位

                    $('.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");


    });

$（'.metro_event'）。每个（函数（i）{
//根据开始时间和持续时间设置宽度和左偏移
像素比例=1.25
startTime=$（this.attr（'start_date'）；
开始时间=时刻（开始时间）；
endTime=时刻（$（this）.attr（'end_date'）；
endTime=力矩（endTime）；
持续时间=时刻持续时间（结束时间-开始时间）；
dayStart=时刻（startTime）.startOf（'day'）；
timeOffsex=时刻持续时间（startTime-dayStart）；
时间偏移=（（时间偏移量-3240000）/60000）*1.25；
时间宽度=（持续时间/60000）*1.25；
$（this.css（“宽度”，timeWidth+“px”）；
$（this.css（“左”，timeOffset+“px”）；
//获取用于比较的电流高度
currentHeight=$（this）.height（）；
currentBottom=currentHeight
//获取上一个定位元素的参数
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；
//将放置位置与先前定位的图元进行比较，并根据需要向下移动
如果（timeOffsetlastTop）
{
$（this.css（“top”，lastBottom+“px”）；
}
$（this.addClass（'positioned'）；
//包含Div的增量高度和设置高度
$（'#events'）.css（“高度”，“300px”）；
});

不要使用

$（“.positioned”）.filter（“：last”）

（如果反复使用，不要使用，只能使用一次）。我想你真正想要的是一个包含最后一个迭代元素的变量，不是吗

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;

---

timeOffsex

我想我们都想要这个，嗯？；）吹毛求疵：反复使用jQuery（这个）是不好的做法。这会使你的代码变慢。将其存储到变量中并使用该变量。您还创建了大量全局变量。var不是可选的。这是一个惊人的快速响应。我很惊讶使用局部变量（与

var

语句一起）并正确缩进代码，请注意，vars已添加。我不会转寄那笔零钱，好吧。我已经将jquery项清理为单变量，并正确声明。