Auf sortieren gesamte DIV

Question

GOAL Rückkehr Return on Art gesamten Inhalt div class = "box"

Ich habe x 4 hat jedes DIV eine Variable "Objekt". Die Variable "Objekt" funktioniert gut, das Skript findet das Objekt 10 addiert und sortiert dann richtig. In diesem Beispiel gibt das Skript 20, 13, 11, 10 sortiert nach größer zurück, um korrekt zu senken. Ich muss den Inhalt der gesamten div class = "box", nicht nur das Objekt Element zurückgeben. ... 20 bbbb, 13 cccc, 11 aaaa, 10 dddd,

<!--CSS ===--> 
    <style type="text/css"> 
.box { 
    border: 1px solid #000; 
    padding: 2px; 
    margin: 2px; 
} 
</style> 

    <!--HTML ===--> 

<div id="containerSort"> 
    <div class="box"> 
    <object> 
     001 
    </object> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
     </tr> 
    </table> 
    </div> 
    <div class="box"> 
    <object> 
     10 
    </object> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>b</td> 
     <td>b</td> 
     <td>b</td> 
     <td>b</td> 
     </tr> 
    </table> 
    </div> 
    <div class="box"> 
    <object> 
     03 
    </object> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>c</td> 
     <td>c</td> 
     <td>c</td> 
     <td>c</td> 
     </tr> 
    </table> 
    </div> 
    <div class="box"> 
    <object> 
     0 
    </object> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>d</td> 
     <td>d</td> 
     <td>d</td> 
     <td>d</td> 
     </tr> 
    </table> 
    </div> 
    <div id="increase"></div> 
</div> 

<!--JS ===--> 

<script type='text/javascript'>//<![CDATA[ 

    $(document).ready(function() { 
    $("#increase").trigger("click"); 
    }); 

    // Assign function as eventListener 
    $("#increase").click(computeAndUpdateValue); 

    // Wrapper function 
    function computeAndUpdateValue() { 
    var valArr = getValues(); 
    valArr = addNumber(valArr); 
    valArr = sortValues(valArr); 
    createAndRenderHTML(valArr, "#containerSort"); 
    } 

    function getValues(){ 
    var returnArray = []; 
    $("div.box").each(function(id, el) { 
    returnArray.push(parseInt($(el).text(), 10)); 
    }); 
    return returnArray; 
    } 

    function addNumber(arr) { 
    return arr.map(function(item) { 
    return parseInt(item, 10) + 10; 
    }); 
    } 

    function sortValues(arr) { 
    return arr.sort(function(a, b) { 
    return a > b ? -1 : a < b ? 1 : 0 
    }); 
    } 

    function createAndRenderHTML(arr, el) { 
    var _html = arr.map(function(item) { 
    return "<div class='box'> <object>" + item + "</object></div>" 
    }).join(""); 
    $(el).html(_html); 
    } 
    //]]> 

    </script> 

Answer 1

Dies kann tatsächlich vereinfachen, aber wie unten Lösung von jetzt lösen Ihr Problem

$(document).ready(function() { 
    $("#increase").trigger("click"); 
}); 

// Assign function as eventListener 
$("#increase").click(computeAndUpdateValue); 

// Wrapper function 
function computeAndUpdateValue() { 
    var valArr = getValues(); 
    valArr = addNumber(valArr); 
    valArr = sortValues(valArr); 
    createAndRenderHTML(valArr, "#containerSort"); 
} 

function getValues() { 
    var returnArray = []; 
    $("div.box").each(function(id, el) { 
     returnArray.push($(el)); 
    }); 
    return returnArray; 
} 

function addNumber(arr) { 
    return arr.map(function(item) { 
     var $object = $(item).find("object"); 
     $object.text(parseInt($object.text(), 10) + 10); 
     return item; 
    }); 
} 

function sortValues(arr) { 
    return arr.sort(function(a, b) { 
     a = parseInt($(a).find("object").text(), 10); 
     b = parseInt($(b).find("object").text(), 10); 
     return a > b ? -1 : a < b ? 1 : 0; 
    }); 
} 

function createAndRenderHTML(arr, el) { 
    var _html = arr.map(function(item) { 
     return "<div class='box'> <object>" + item.text() + "</object></div>" 
    }); 
    $(el).empty().append(_html); 
} 

Was ich hier mache ist

• Erstellen die Anordnung von Objekt
• dieses Objekt auf der Grundlage des Wertes in Objekt-Tag
• Anfügen sortiertes Array in Behältern Sortier

I eine js Geige an geschaffen: https://jsfiddle.net/7pjL17bu/

Wenn Sie möchten nicht den ganzen Div-Inhalt setzen, dann sehen Sie die bearbeitete Geige unter: https://jsfiddle.net/7pjL17bu/1/

Answer 2

ist es besser, valArr Array zu Objekt si zu erweitern nce wollen Sie mehr, dass ein Datenfeld speichern,
so jetzt in valArr gibt es int Schlüssel, der in <object> Tag für Wert steht und content Schlüssel ist ein String mit <td> Tags Inhalt.
Ich habe auch alle dort Funktionen verändert, so werden sie mit Objektdatentyp arbeiten:

$(document).ready(function() { 
    $("#increase").trigger("click"); 
}); 

// Assign function as eventListener 
$("#increase").click(computeAndUpdateValue); 

    // Wrapper function 
function computeAndUpdateValue() { 
    var valArr = getValues(); 
    valArr = addNumber(valArr); 
    console.log(valArr); 
    valArr = sortValues(valArr); 
    createAndRenderHTML(valArr, "#containerSort"); 
} 

function getValues() { 
    var returnArray = []; 
    $("div.box").each(function(id, el) { 
     var content = ""; 
     $(el).find("td").each(function(id, el) { 
      content += " "+$(el).text(); 
     }); 
     returnArray.push({int:parseInt($(el).text(), 10),content: content}); 
    }); 
    return returnArray; 
} 

function addNumber(arr) { 
    return arr.map(function(item) { 
     console.log(item); 
     return {int:parseInt(item.int, 10) + 10, content: itemcontent}; 
    }); 
} 

function sortValues(arr) { 
    return arr.sort(function(a, b) { 

     return a > b ? -1 : a < b ? 1 : 0; 
    }); 
} 

function createAndRenderHTML(arr, el) { 
    var _html = arr.map(function(item) { 
     return "<div class='box'> <object>" + item.int +" "+item.content+"</object></div>"; 
    }).join(""); 
    $(el).html(_html); 
} 

Sie können beachten Sie auch meine Implementierung hier: https://jsfiddle.net/eko24ive/npt3wa95/