比较 Dom 元素的原始数组与 Dom 元素的排序数组并检查它们是否不同

Question

我有一个动态 DOM 元素的结构，我正在使用 for 循环和 setInterval 不断评估这些元素。在那个时间间隔内，我对数组进行排序，然后使用 JQuery 排序函数更改 dom，以便即时对我的 DOM 结构进行排序。

如果排序函数实际上改变了元素的顺序，我只想更改 DOM（通常这发生在新的 DOM 元素动态进入结构时），如果排序函数在已经排序的数组上再次运行，我不想对 dom.

做任何事情

我发现了很多方法来比较数组是否相等，但我的情况很特殊，因为我并不真正关心数组元素/内容，但我确实需要检查这些元素是否不相同订购，以便我可以更改 dom。

    setInterval(function () {       
    //Incoming Chat Structure Variables
    var $incomingChatsTable, $incomingChatsRows, $incomingChatTags
    $incomingChatsTable= $("div[__jx__id*='incoming_list__list_content_container']")
    $incomingChatsRowsContainer=$("div[__jx__id='___$_194__visitor_list__incoming_list__list__content']")
    $incomingChatsRows = $("div[class*='renderers_Incoming']")
    $incomingChatTags = $( "div[__jx__id*='incoming_list__list__content'] div[class*='renderers_Incoming'] .visitorlist_tags .jx_ui_html_span:last-child .tag").toArray()        
    $popupTrigger = $("div[jx\:list\:rowid]") 
    //Assigning Priorities Function
    function assignPriority(arrayParent) {
        for ( var i=0; i <= arrayParent.length; i++) {
            var actualRow = $(arrayParent[i])
            var minutesInQueue = $(actualRow).find('.time_cell').text().substr(0,2)
            var priorityVal = parseInt(minutesInQueue)
            var actualRowTags = $( actualRow ).find('.tag').toArray()
            $(actualRow).addClass('priorityRow')               
            for (var k=0; k <= actualRowTags.length; k++) {
                let normalHolderTag = $(actualRowTags[k]).text().toLowerCase()
                if (normalHolderTag === 'vip') {
                    priorityVal += 30
                    $(actualRow).attr('data-priority', priorityVal)                    
                } else if ( normalHolderTag === 'rg' ) {
                    priorityVal += 20
                    $(actualRow).attr('data-priority', priorityVal)
                } else if ( normalHolderTag === 'accountclosure' ) {
                    priorityVal += 10
                    $(actualRow).attr('data-priority', priorityVal)                    
                } else {
                    $(actualRow).attr('data-priority', priorityVal)   
                } 
                //$(actualRow).find('.numbers_cell').text(priorityVal)
            }
        }     
    }   
    //Sorting Incoming Chats By Priority
    function orderByPriority(container) {
        myArray = container.find('.priorityRow')
        var changed = false
        myArray.sort(function(a,b){
            contentA = parseInt( $(a).data('priority') )
            contentB = parseInt( $(b).data('priority') )
            if ( (contentB - contentA) * ( myArray.indexOf(b) - myArray.indexOf(a) ) > 0 ){
                changed = true
            }                     
            return (contentB - contentA)                             
        })
        if(changed) {
            $(sortedArray).prependTo( container )
        } else{
            console.log('No need To Sort')
        }
    }
    setInterval(function () {
        assignPriority( $incomingChatsRows )
        orderByPriority( $incomingChatsRowsContainer )
    }, 500)
}, 1000)

更新：

myArray 现在是一个全局变量，我添加了一个 IF 语句来评估排序函数的结果并将该结果乘以 a、b 索引。如果它大于 0，那么我将“已更改”变量的值更改为“真”，但我收到“myArray.indexOf 不是函数”错误。

Answer 1

您可以在 orderByPriority 排序函数中添加一行代码，仅当变量实际发生更改时才将其设置为真：

function orderByPriority(container) {
        var myArray = container.find('.priorityRow')
        var changed = false
        myArray.sort(function(a,b){
            contentA = parseInt( $(a).data('priority') )
            contentB = parseInt( $(b).data('priority') )
            if((contentB - contentA)*(myArray.index(b)-myArray.index(a))>0){ 
            //check if these have the same sign, i.e. something has changed
            changed = true;
            }
            return (contentB - contentA)                              
        })
        if(changed){}//do something to modify DOM
    }

排序函数有三种可能的输出，它们将决定是否需要对两个输入进行排序：

大于 0：将 a 排序为大于 b 的索引
小于 0：将 b 排序为大于 a
等于0：不改变顺序

因此，导致进行更改的可能条件是：

输出大于0且a的索引当前小于b的索引
输出小于0且a的索引当前大于b的索引

我们可以将两个指标之间的差异表示为index(b)-index(a)。如果 a 的索引当前小于 b 的索引，则此值为正。否则，该值为负数。
由此可见，上述条件实说：

如果输出和index(b)-index(a)有相同的符号，需要改变一些东西。

我们可以通过将它们彼此相乘并测试结果是否大于 0 来检查它们是否具有相同的符号。这意味着某些东西已经改变，所以在 if 条件中我们设置 changed 至 true

比较 Dom 元素的原始数组与 Dom 元素的排序数组并检查它们是否不同

Comparing Original Array of Dom Elements with Sort Array of Dom Elements and check if they are different

html

jquery

dom-traversal