Javascript 查找添加内容的正确位置 我的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;
            }
        }
    });
});

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;

我的HTML结构： 我不知道如何实现的是如何将内容附加到正确的位置，通过这一点，我参考了从

数据邮件ID=“1233”

中获取的顺序，以便在单击pin或unpin时，将内容附加到该位置，因此，如果您单击pin邮件ID X，它将附加在X-1之后，如果项目未固定，则会附加在X-1之后

重要提示：

---

每个列表每页仅显示20个项目，当单击转到下一页或上一页时，该页将获取在单击以锁定或取消锁定时会被修改的内容，因此此脚本将仅与该页上可以找到的ID相关，因此意味着如果找不到取消锁定ID 123和122，它只是被删除，对于钉住，只有当

.pinted

可见时才会出现附加部分，否则该项目就会被删除。

搜索id较大的第一封邮件，并将单击的元素附加到它之前

（下面的函数使用存储相关的DOM部分，因此我只需要查询DOM一次。实际上不需要，但我就是这样做的^^）

var-togglePinState=（函数（）{
var pinted=document.querySelector（“.pinted”），
unpinned=document.querySelector（“.Standard”），
pinnedMails=pinted.GetElementsByCassName（“邮件”），
unpinnedMails=unpinned.getElementsByClassName（“邮件”）；
//.GetElementsByCassName（），因为它返回一个活动的HTMLCollection
//pinnedMails和unpinnedMails将始终具有当前取消/固定的“邮件”，而无需重新查询DOM
返回函数（mailItem）{
var mailId=parseInt（mailItem.getAttribute（“数据邮件ID”），10），
MailItemsPinned=（mailItem.parentNode.className==“固定”），
newParent=（mailitemispined？unpined:pinted），
mailsToCheck=（mailItemIsPinned？unpinnedMails:pinnedMails），
//下面循环的变量
i=0，
l=mailsToCheck.length，
currentId；
对于（；i邮件ID）{
//在第一封id较大的邮件之前插入
mailsToCheck[i].insertadjacentellement（“beforebeagin”，mailItem）；
返回；
}
}
//此时，我们还没有找到id更大的邮件，因此可以安全地将其附加到列表末尾
newParent.appendChild（mailItem）；
}
}());

要在脚本中使用它，只需在

邮件pin

分支中调用它：

case 'mail-pin':
    togglePinState(e.target);
    break;

以下是正在发挥作用的功能：

var-togglePinState=（函数（）{
var pinted=document.querySelector（“.pinted”），
unpinned=document.querySelector（“.Standard”），
pinnedMails=pinted.GetElementsByCassName（“邮件”），
unpinnedMails=unpinned.getElementsByClassName（“邮件”）；
//.GetElementsByCassName（），因为它返回一个活动的HTMLCollection
//pinnedMails和unpinnedMails将始终具有当前取消/固定的“邮件”，而无需重新查询DOM
返回函数（mailItem）{
var mailId=parseInt（mailItem.getAttribute（“数据邮件ID”），10），
MailItemsPinned=（mailItem.parentNode.className==“固定”），
newParent=（mailitemispined？unpined:pinted），
mailsToCheck=（mailItemIsPinned？unpinnedMails:pinnedMails），
//下面循环的变量
i=0，
l=mailsToCheck.length，
currentId；
对于（；i邮件ID）{
//在第一封id较大的邮件之前插入
mailsToCheck[i].insertadjacentellement（“beforebeagin”，mailItem）；
返回；
}
}
//此时，我们还没有找到id更大的邮件，因此可以安全地将其附加到列表末尾
newParent.appendChild（mailItem）；
}
}());
文档查询选择器（“div.inbox-content”）
.addEventListener（“单击”，函数（e）{
if（e.target.nodeName==“DIV”&&e.target.classList.contains（“邮件”））{
切换状态（如目标）；
}
});
div{padding:2px}
分区邮件{
边框：点黑色1px；
文本对齐：居中；
}
.pinted{边框：实心1px红色}
.Standard{边框：实心1px蓝色}

1234
1237
1233
1235
1236
1238
你好，谢谢你@Andreas。您的脚本是否具有“取消绑定”功能？我注意到这个片段似乎没有，刚回到家，到目前为止只看了一眼。我感谢你的时间和努力，一旦我对你有了更深入的了解，我将对你的代码进行评分和奖励。通过查看你的代码，与我目前使用jQuery的编程技能相比，这似乎是一个更高的水平。现在就用你的代码片段看看我能做到什么。到目前为止，我发现的唯一一个问题是，将其放置在我的案例“邮件pin”中：需要单击任意pin两次才能工作，之后你可以单击任意pin一次，将其移动到锁定区域。我还需要使
this>.Actions>.Pin
在被钉住时显示。@timmall我已经调整了脚本，使其也可以解开邮件，并添加了一部分关于如何使用functionAll的内容，我只需调整
切换pinstate（e.target）切换到
切换状态（例如target.closest（'.Mail'）
case 'mail-pin':
    togglePinState(e.target);
    break;