Question

我已经看到建议使用.last()从最后选择的元素中选择元素，但是所述元素可以在其他类型之前插入，如代码片段所示。有没有办法在不使用全局变量的情况下选择给定选择中的最新或最旧元素？

popupWindow = $(
  '<div class="popup">' + (
    '<button class="close">Close</button>' +
    '<div class="work-area"></div>'
  ) + '</div>'
);
mainArea = $('.work-area');

$('#show-back').on('click', function() {
  popupWindow.clone().insertBefore(mainArea);
  drawOnFirst();
});

$('#show-front').on('click', function() {
  popupWindow.clone().insertAfter(mainArea);
  drawOnFirst();
});

$('body').on('click', '.close', function() {
  $(this).parent().remove();
});

function drawOnFirst() {
  $('.work-area').text('').first().text('I\'m first!');
}

.popup {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.25);
  z-index: 99;
}

.work-area {
  width: 200px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #080;
  position: absolute;
  top: calc(50% - 35px);
  left: calc(50% - 100px);
}

.popup .work-area {
  top: calc(50% - 15px);
  left: calc(50% - 80px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="work-area"></div>
<button id="show-back">Popup Before</button>
<button id="show-front">Popup After</button>

Answer 1

据我所知，没有办法获得最后添加的元素。

您需要使用变量来保存对＆＃34;最新＆＃34;的引用。模态窗口或创建新模态时，您可以创建一个附加属性，例如可以是时间戳。这样，您就可以找出最后添加的内容。

示例：

popupWindow = $(
    '<div class="popup" data-created="' + (+new Date) + '">'+(
        '<button class="close">Close</button>'+
        '<div class="work-area"></div>'
    )+'</div>'
);

然后，您可以轻松地按时间戳对所有弹出窗口进行排序，并获得最新的弹出窗口。

选择最新/最旧的元素

1 个答案: