Question

尝试按数据属性值（div）对data-date个元素进行排序；

获取类型错误-a.attr is not a function。

有帮助吗？

$('button').on('click', function() {
  $('.title').sort(function(a, b) {
    if (a.attr('data-date') < b.attr('data-date')) {return -1;}
	else {return 1;}
  }).appendTo('#titles');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='titles'>
  <div class='title' data-date="2017-11-05 07:29:35">lorem</div>
  <div class='title' data-date="2017-09-22 05:27:31">ipsum</div>
  <div class='title' data-date="2014-07-29 08:29:03">lorema</div>
  <div class='title' data-date="2016-12-04 05:04:14">ipsuma</div>
</div>

<button>CLICK</button>

Answer 1

使用Jquery调用.attr。这是固定代码。

$('button').on('click', function(){
		$('.title').sort(function(a, b) {
			if ($(a).attr('data-date') < $(b).attr('data-date')) {return -1;}
			else {return 1;}
		}).appendTo('#titles');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='titles'>
<div class='title' data-date="2017-11-05 07:29:35">lorem</div>
<div class='title' data-date="2017-09-22 05:27:31">ipsum</div>
<div class='title' data-date="2014-07-29 08:29:03">lorema</div>
<div class='title' data-date="2016-12-04 05:04:14">ipsuma</div>
</div>

<button>CLICK</button>

Answer 2

// Since a and b are DOM Elements, not jQuery objects, you can use the
// getAttribute method to get the date values.

// If you want to do a string sort, strings have a built in localeCompare
// method that returns the -1, 0, 1 sort expects
$('button').eq(0).on('click', function(){
  $('.title').sort(function(a, b) {
    return a.getAttribute('data-date').localeCompare(b.getAttribute('data-date'));
  }).appendTo('#titles');
});

// Or if you wanted to sort by dates, you'd need to fix the strings to a
// proper ISO format so Date knows how to parse them

$('button').eq(1).on('click', function(){
  $('.title').sort(function(a, b) {
                                           // replace space with T and append
                                           // a 000 timezone so the time does
                                           // not change
      var aDate = a.getAttribute('data-date').replace(/ /, 'T') + '.000Z';
      var bDate = b.getAttribute('data-date').replace(/ /, 'T') + '.000Z';
    
      return new Date( aDate ) - new Date( bDate );
  }).appendTo('#titles');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='titles'>
<div class='title' data-date="2017-11-05 07:29:35">lorem</div>
<div class='title' data-date="2017-09-22 05:27:31">ipsum</div>
<div class='title' data-date="2014-07-29 08:29:03">lorema</div>
<div class='title' data-date="2016-12-04 05:04:14">ipsuma</div>
</div>

<button>SORT BY STRING</button>
<button>SORT BY DATE</button>

Answer 3

下面是解决问题的常用JavaScript解决方案。简单的步骤包括查询DOM中所需的元素，通过date访问其dataset属性，并根据元素dataset.data的值对数组进行排序：

function orderByDate(a, b) {
  if (new Date(a['date']) < new Date(b['date'])) {
    return -1;
  }
  if (new Date(a['date']) > new Date(b['date'])) {
    return 1;
  }
  return 0;
}

function reorder(data) {
  const titlesEl = document.querySelector('#titles');
  titlesEl.innerHTML = '';
  data.sort(orderByDate).forEach(o => {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(o.key));
    titlesEl.appendChild(div);
  });
}

const divEls = Array.from(document.querySelectorAll('[id=titles] > [class=title]'));


reorder(divEls.map(div => {
  return {
    //You need to access the dataset property to get data-*
    date: div.dataset.date,
    key: div.innerHTML
  }
}));

<div id='titles'>
  <div class='title' data-date="2017-11-05 07:29:35">lorem</div>
  <div class='title' data-date="2017-09-22 05:27:31">ipsum</div>
  <div class='title' data-date="2014-07-29 08:29:03">lorema</div>
  <div class='title' data-date="2016-12-04 05:04:14">ipsuma</div>
</div>

Answer 4

attr（）是一种jQuery方法，要在HTML元素上使用它，必须使用$。因此，与其将a.attr（）写为$（a）.attr（）

按div的data属性排序-类型错误

4 个答案: