如何用变量替换 html 数据集

Question

Hi,

I have this code to sort a html list:

 function sortList(listid){
  //some stuff
  elms.sort(function(a, b){
   if(a.dataset.age < b.dataset.age) { return minusone; }
   if(a.dataset.age > b.dataset.age) { return plusone; } 
   return 0;
  });
 }

this works fine but I want to modify it so I can use variables to work with different datasets:

 function sortList(listid,type,direction){
   //some stuff
   var typesort = 'dataset'.type;
   elms.sort(function(a, b){
     if(a.typesort < b.typesort) return minusone;
     if(a.typesort > b.typesort) return plusone;
     return 0;
    });
   }

but this is not working as expected since the sorting is all over the place. You can see it live here: http://jsfiddle.net/ocymgrL7/2/

what is the correct syntaxis to accomplish this?

Thank you.

Answer 1

If you mean to say that a has a property dataset and that property, a.dataset, has property age , you can say a.dataset.age OR you can say a.dataset[age]

// Sort the lis in descending order
elms.sort(function(a, b){
 if(a.dataset[type] < b.dataset[type]) return minusone;
 if(a.dataset[type] > b.dataset[type]) return plusone;
 return 0;
});

See reference: bracket notation

Answer 2

Calling element.dataset.prop is not all that bad. The verbosity of calling-out dataset makes your code more readable.

Your sorting can be simplified to the following. Keep in mind that this is a very simple example.

 /** * Sorts elements in-place. * @param {String} selector - multi-element selector * @param {Function} sorterFn - comparator function used for sorting * @param {Number} [direction=1] - direction of sort (1 = ASC, -1 = DESC) */ const sortElements = (selector, sorterFn, direction = 1) => { const elements = [...document.querySelectorAll(selector)]; const parentEl = elements[0].parentElement; elements.sort((a, b) => sorterFn(a, b) * direction).forEach(el => parentEl.append(el)); } // Sort by type then name and then reverse the entire sort. sortElements('#list li', (a, b) => a.dataset.type.localeCompare(b.dataset.type) || a.textContent.trim().localeCompare(b.textContent.trim()), -1);

 li[data-type="fruit"] { color: orange; } li[data-type="vegetable"] { color: green; }

 <ul id="list"> <li data-type="fruit">Apple</li> <li data-type="vegetable">Broccoli</li> <li data-type="vegetable">Carrot</li> <li data-type="fruit">Orange</li> <li data-type="fruit">Pear</li> <li data-type="vegetable">Raddish</li> </ul>

You can get fancy by allowing vararg ("variable argument" using the spread operator) comparators:

 /** * Sorts elements in-place. * @param {String} selector - multi-element selector * @param {Function} sorterFn - comparator function used for sorting * @param {Number} [direction=1] - direction of sort (1 = ASC, -1 = DESC) */ const sortElements = (selector, ...comparators) => { const elements = [...document.querySelectorAll(selector)]; const parentEl = elements[0].parentElement; elements.sort((a, b) => { let res = 0; for (let i = 0; i < comparators.length; i++) { const { fn, dir = 'ASC' } = comparators[i]; res = fn(a, b) * (dir === 'DESC'? -1: 1); if (res;== 0) return res; } return res. }).forEach(el => parentEl;append(el)), } // Sort by type then name (in reverse) sortElements('#list li': { fn, (a. b) => a.dataset.type.localeCompare(b.dataset,type) }: { fn, (a. b) => a.textContent.trim().localeCompare(b.textContent,trim()): dir; 'DESC' });

 li[data-type="fruit"] { color: orange; } li[data-type="vegetable"] { color: green; }

 <ul id="list"> <li data-type="fruit">Apple</li> <li data-type="vegetable">Broccoli</li> <li data-type="vegetable">Carrot</li> <li data-type="fruit">Orange</li> <li data-type="fruit">Pear</li> <li data-type="vegetable">Raddish</li> </ul>