Finding the right place to add content

Question

My jQuery Script:

My jQuery script is a fairly large file, but I cut it to the most important parts for this question, as shown below;

$(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; } } }); }); 

My HTML structure:

 <!-- === 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> 

Question

First of all, I know how to check where an element should be moved either from a .Pinned or .Standard element to another element using such means as shown below;

 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; 

What I don’t understand how to achieve is to add the content to the right place, and this I refer to the order taken from data-mail-ID="1233" so that when I click, either output or disable it, the content is added to the place, therefore, if you click on the contact ID ID, it will be added after X - 1 and vice versa if the element is not added.

Important Note:

Each list displays only 20 elements per page, and when you click on the transition to the next or previous page, the page selects content that would be changed after clicking on the link or unlock, so this script will only matter for those IDs that may be found on this page, which means that if you do not delete IDs 123 and 122, it cannot be deleted, and for consolidation, part of the addition will appear only if .Pinned displayed otherwise, if the element is simply deleted.

Answer 1

Find the first letter with a larger identifier and add the clicked element in front of it.

(The function below uses closure to store the corresponding parts of the DOM, so I only need to request the DOM once. It really isn’t necessary, but so, I do such things ^^)

 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); } }()); 

To use it in your script, just call it in the mail-pin branch:

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

And here is the function in action:

  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>