Блог

Главная - Вопросы по программированию - Как заменить набор данных html переменными

Как заменить набор данных html переменными

#javascript

#javascript

Вопрос:

Привет,

У меня есть этот код для сортировки списка html:

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

это работает нормально, но я хочу изменить его, чтобы я мог использовать переменные для работы с разными наборами данных:

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

но это работает не так, как ожидалось, поскольку сортировка происходит повсюду. Вы можете увидеть это вживую здесь: http://jsfiddle.net/ocymgrL7/2 /

каков правильный синтаксис для достижения этой цели?

Спасибо.

Комментарии:

1. Вы хотели сказать, a[typesort] < b[typesort] ?

2. тоже не работает.

Ответ №1:

Если вы хотите сказать, что a у него есть свойство dataset , и это свойство, .dataset, имеет свойство age , вы можете сказать a.dataset.age ИЛИ вы можете сказать 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;
});

См. Ссылку: обозначение в скобках

Ответ №2:

Вызов element.dataset.prop не так уж и плох. Детализация вызова dataset делает ваш код более читабельным.

Ваша сортировка может быть упрощена следующим образом. Имейте в виду, что это очень простой пример.

 /**
 *  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>

Вы можете проявить фантазию, разрешив компараторы vararg («переменный аргумент» с использованием оператора распространения):

 /**
 *  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>

Метки: