按javascript中的每个第n个元素排序

Question

I have a set of <tr> elements that I'd like to sort in batches ie every nth element is used for comparison in the sorting algorithm and subsequent n-1 elements are moved along with the nth element. ( Update : I should clarify that I do not have control over the HTML)

In the following case, the rows are sorted alphabetically by the value of 1st, 4th & 7th element ie Apple, Banana & Coconut. The subsequent 2 <tr> elements following them are moved along with them ie batches of 3.

Before sorting:

<tr> Banana </tr>
<tr> - Shake </tr>
<tr> - Chips </tr>
<tr> Apple </tr>
<tr> - Juice </tr>
<tr> - Sauce </tr>
<tr> Coconut </tr>
<tr> - Curry </tr>
<tr> - Water </tr>

After sorting:

<tr> Apple </tr>
<tr> - Juice </tr>
<tr> - Sauce </tr>
<tr> Banana </tr>
<tr> - Shake </tr>
<tr> - Chips </tr>
<tr> Coconut </tr>
<tr> - Curry </tr>
<tr> - Water </tr>

There are some straight forward ways eg Split this into 3 lists and sort the first one normally. Then sort second & third based on first list. My question is, is it possible to do it in the compare function in array.sort([compareFunction]) ?

Update : Another method would be to convert it into an array like this

[['Banana','- Shake', '- Chips'],['Apple', '- Juice','- Sauce'],['Coconut','- Curry', '- Water']]

and sort it like this sort(function(a, b) {return a[0] - b[0]})

Answer 1

I've used a basic array to display the method, but this worked for me:

var groupSize = 3;    
var arr = ['banana',' - shake',' - chips','apple',' - juice',' - sauce','coconut',' - curry',' - water'];
var newArr = [];
while((sec = arr.splice(0,groupSize)).length > 0)
{
    newArr.push(sec);
}
newArr.sort()
arr = [];
for(var i in newArr)
{
    for(var j in newArr[i])
    {
        arr.push(newArr[i][j]);
    }
}
console.log(arr); //["apple", " - juice", " - sauce", "banana", " - shake", " - chips", "coconut", " - curry", " - water"]

Answer 2

is it possible to do it in the compare function in array.sort(compareFunction) ?

Yes, by making the array items hierarchy-aware. So you'd have to introduce a pointer from Shake to Banana , from Chips to Banana , from Juice to Apple and so on. The compare function would then look like

function compare(a, b) {
    var aTop = a.parent || a,
        bTop = b.parent || b;
    if (aTop.value > bTop.value) return 1;
    if (aTop.value < aTop.value) return -1;
    if (b.parent == a) return 1;
    if (a.parent == b) return -1;
    if (a.value > b.value) return 1;
    if (a.value < b.value) return -1;
    return 0;
}

It would be possible a bit more programmatically (with an array), but believe me - you don't really want this.

A similar approach would be to to simply concatenate the arrays to strings ( ["Banana"] → "Banana" , ["Banana", "Shake"] → "Banana-Shake" ) so that you didn't need a custom compare function any more, and then split them after sorting to get back the original values.

However, your grouping method is superior to these approaches as it requires much less comparisons.

Answer 3

I think you are going to require an extra pass through the table, this could be done when the table is created. You need to create a 'key' based on the header row plus the children.

So after this pass you have, i'm showing attributes but you could use js properties instead:

    <tr data-key="Banana"> Banana </tr>
    <tr data-key="Banana - Shake"> - Shake </tr>
    <tr data-key="Banana - Chips"> - Chips </tr>
    <tr data-key="Apple"> Apple </tr>
    <tr data-key="Apple - Juice"> - Juice </tr>
    <tr data-key="Apple - Sauce"> - Sauce </tr>
    <tr data-key="Coconut"> Coconut </tr>
    <tr data-key="Coconut - Curry"> - Curry </tr>
    <tr data-key="Coconut - Water"> - Water </tr>

then sort by that key