Question

我有这个标记

<div id="aercology">
    <div class="row shaded">
      <div class="columns one">
       <span><a href="#">Gema</a></span>
      </div>
      <div class="columns two">
       <span><a href="#">Air Quality<br>Engineering(AQE)</a></span>
      </div>
      <div class="columns three">
       <span><a href="#">Whitney</a></span>
      </div>
    </div>
   <div class="row">
      <div class="columns one">
       <span><a href="#">Guyson</a></span>
      </div>
      <div class="columns two">
       <span><a href="#">Hoffman</a></span>
      </div>
      <div class="columns three">
       <span><a href="#">Micro Air</a></span>
      </div>
    </div>
</div>

我如何使用jquery按字母顺序对文本进行排序。保留div行上的阴影。?? div行交替进行..

当前代码

var mylist = jQuery('#aercology');

                var listitems = mylist.children('.columns span a').get();

                listitems.sort(function(a, b) {
                   return jQuery(a).text().toUpperCase().localeCompare(jQuery(b).text().toUpperCase());
                });

                jQuery.each(listitems, function(index, item) {
                   mylist.append(item); 
                });

期望的输出将是

<div id="aercology">
    <div class="row shaded">
      <div class="columns one">
       <span><a href="#">Air Quality<br>Engineering(AQE)</a></span>
      </div>
      <div class="columns two">
      <span><a href="#">Gema</a></span>
      </div>
      <div class="columns three">
       <span><a href="#">Guyson</a></span>
      </div>
    </div>
   <div class="row">
      <div class="columns one">
        <span><a href="#">Hoffman</a></span>
      </div>
      <div class="columns two">
        <span><a href="#">Micro Air</a></span>
      </div>
      <div class="columns three">
      <span><a href="#">Whitney</a></span>
      </div>
    </div>
</div>

任何帮助将不胜感激

Answer 1

你可以这样做：

var items = $('.row a').map(function () {
  return $(this).html();
}).get();

items.sort().reverse();

$(".row a").each(function(){
  $(this).html(items.pop())
})

Demo

Answer 2

只是做了一个快速的小提琴，see here.

这是你想要做的吗？

<强> HTML

 <div id="aercology">
  <div class="rowshaded">
   <ul>
   <li><a href="#">Gema</a></li>
   <li><a href="#">Air Quality Engineering(AQE)</a></li>
   <li><a href="#">Whitney</a></li>
   </ul>
  </div>

  <div class="row">
   <ul>
   <li><a href="#">Micro Air</a></li>
   <li><a href="#">Guyson</a></li>
   <li><a href="#">Hoffman</a></li>
   </ul>
  </div>

<强> JS

$('.rowshaded li').sort(function(a, b){
return $('a', a).text() > $('a', b).text() 
}).appendTo('div.rowshaded')

$('.row li').sort(function(a, b){
return $('a', a).text() > $('a', b).text() 
}).appendTo('div.row')

按a.text值排序

2 个答案:

Demo