查找追加内容的正确位置

Finding the correct place to append content

本文关键字：位置 追加 查找      更新时间：2023-09-26

我的jQuery脚本:

我的jQuery脚本是一个相当大的文件，但是我已经把它缩减到最相关的部分，如下所示;

$(document).ready(function() {
    "use strict";
    $(document).on('click', function(e) {
        if (($(e.target).attr('data-action')) || $(e.target).parent().data('action')) {
            if ($(e.target).attr('data-action')) {
                action = $(e.target).data('action');
            } else {
                action = $(e.target).parent().data('action');
            }
            switch (action) {
                case 'mail-pin':
                    // Code for 'mail-pin' click
                    break;
                default:
                    return;
            }
        }
    });
});

我的HTML结构:

<!-- === INBOX LIST STARTS === -->
<div class="inbox-content clearfix">
    <div class="Head">
        <!-- Code for inbox header -->
    </div>
    <div class="Body clearfix">
        <div class="Pinned">
            <div class="Mail clearfix" data-mail-ID="1234">
                <!-- Mail Item -->
            </div>
            <div class="Mail clearfix" data-mail-ID="1235">
                <!-- Mail Item -->
            </div>
        </div>
        <div class="Standard">
            <div class="Mail clearfix" data-mail-ID="1233">
                <!-- Mail Item -->
            </div>
            <div class="Mail clearfix" data-mail-ID="1236">
                <!-- Mail Item -->
            </div>
        </div>
    </div>
</div>

首先，我知道如何检查项目将从.Pinned元素或.Standard元素移动到其他元素的位置，通过如下所示的方法;

case 'mail-pin':
    console.log('Hello');
    if ($(e.target).closest('.Mail').parent().hasClass('Pinned')) {
        console.log('It is pinned.');
    } else {
        console.log('It is not pinned.');
    }
    break;

我不明白如何实现的是如何在正确的位置附加内容，通过这一点，我指的是从data-mail-ID="1233"中获取的订单，以便在单击pin或unpin时，内容将附加到该位置，因此，如果您单击pin邮件ID X，它将在X - 1之后附加，反之亦然，如果该项目未被固定。

重要提示:

每个列表每页只显示20个项目并点击进入下一个或前一页,页面获取的内容会被修改后点击销或拔掉因此这个脚本只会是相关的ID,可以发现在页面,因此意义如果您无法找到拔掉ID 123年和122年,它只是被锁住,追加部分只会发生如果.Pinned可见否则条目删除。

搜索第一个具有较大id的邮件，并在其前面添加所单击的元素。

(下面的函数使用闭包来存储相关的DOM部分，因此我只需要查询DOM一次。这不是真的需要，但这就是我做这些事情的方式^^)

var togglePinState = (function () {
    var pinned = document.querySelector(".Pinned"),
        unpinned = document.querySelector(".Standard"),
        pinnedMails = pinned.getElementsByClassName("Mail"),
        unpinnedMails = unpinned.getElementsByClassName("Mail");
        // .getElementsByClassName() because it returns a live HTMLCollection
        // pinnedMails and unpinnedMails will always have the currently un/pinned "mails" without re-querying the DOM
    return function (mailItem) {
        var mailId = parseInt(mailItem.getAttribute("data-mail-ID"), 10),
            mailItemIsPinned = (mailItem.parentNode.className === "Pinned"),
            newParent = (mailItemIsPinned ? unpinned : pinned),
            mailsToCheck = (mailItemIsPinned ? unpinnedMails : pinnedMails),
            // variables for the loop below
            i = 0,
            l = mailsToCheck.length,
            currentId;
        for (; i < l; i++) {
            currentId = parseInt(mailsToCheck[i].getAttribute("data-mail-ID"), 10);
            if (currentId > mailId) {
                // insert before first pinned mail with a bigger id
                mailsToCheck[i].insertAdjacentElement("beforebegin", mailItem);
                return;
            }
        }
        // at this point we have not found a mail with a bigger id so we can safely append it at the end of the list
        newParent.appendChild(mailItem);
    }
}());
要在脚本中使用它，只需在mail-pin分支中调用它: 
case 'mail-pin':
    togglePinState(e.target);
    break;

下面是函数的作用:

    var togglePinState = (function() {
      var pinned = document.querySelector(".Pinned"),
        unpinned = document.querySelector(".Standard"),
        pinnedMails = pinned.getElementsByClassName("Mail"),
        unpinnedMails = unpinned.getElementsByClassName("Mail");
      // .getElementsByClassName() because it returns a live HTMLCollection
      // pinnedMails and unpinnedMails will always have the currently un/pinned "mails" without re-querying the DOM
      return function(mailItem) {
        var mailId = parseInt(mailItem.getAttribute("data-mail-ID"), 10),
          mailItemIsPinned = (mailItem.parentNode.className === "Pinned"),
          newParent = (mailItemIsPinned ? unpinned : pinned),
          mailsToCheck = (mailItemIsPinned ? unpinnedMails : pinnedMails),
          // variables for the loop below
          i = 0,
          l = mailsToCheck.length,
          currentId;
        for (; i < l; i++) {
          currentId = parseInt(mailsToCheck[i].getAttribute("data-mail-ID"), 10);
          if (currentId > mailId) {
            // insert before first pinned mail with a bigger id
            mailsToCheck[i].insertAdjacentElement("beforebegin", mailItem);
            return;
          }
        }
        // at this point we have not found a mail with a bigger id so we can safely append it at the end of the list
        newParent.appendChild(mailItem);
      }
    }());
document.querySelector("div.inbox-content")
					.addEventListener("click", function(e) {
          	if (e.target.nodeName === "DIV" && e.target.classList.contains("Mail")) {
            	togglePinState(e.target);
            }
          });
div { padding: 2px }
div.Mail {
  border: dotted 1px black;
  text-align: center;
}
.Pinned { border: solid 1px red }
.Standard { border: solid 1px blue }
<!-- === INBOX LIST STARTS === -->
<div class="inbox-content clearfix">
  <div class="Head">
    <!-- Code for inbox header -->
  </div>
  <div class="Body clearfix">
    <div class="Pinned">
      <div class="Mail clearfix" data-mail-ID="1234">1234</div>
      <div class="Mail clearfix" data-mail-ID="1237">1237</div>
    </div>
    <div class="Standard">
      <div class="Mail clearfix" data-mail-ID="1233">1233</div>
      <div class="Mail clearfix" data-mail-ID="1235">1235</div>
      <div class="Mail clearfix" data-mail-ID="1236">1236</div>
      <div class="Mail clearfix" data-mail-ID="1238">1238</div>
    </div>
  </div>
</div>

相关文章：