同位素按字母顺序排序

Question

对于一个项目我遇到同位素问题，按字母顺序排序项目，以重音字符开头。

重音字符位于列表的末尾。

/* Set isotope */
var $container = $('.wall').isotope({
  itemSelector: '.item',
  layoutMode: 'masonry',
  masonry: {
      columnWidth: '.item',
      gutter: 30
   },
   getSortData: {
      name: 'h2'
   }
    
})
$('button.alpha').on('click',function(){
  $container.isotope({ sortBy: 'name',sortAscending:getOrderBy() });
})
$('button.original-order').on('click',function(){
  $container.isotope({ sortBy: 'original-order',sortAscending:getOrderBy() });
})
$('button.orderby').on('click',switchOrderBy);
function getOrderBy(){
  return $('.orderby').hasClass('asc');
}
function switchOrderBy(){
  $('.orderby').toggleClass('asc');
    $('.orderby').text(($('.orderby').hasClass('asc'))?'ASC':'DESC');
   $container.isotope({ sortBy: 'name',sortAscending:getOrderBy() });
 
}

.item{
    font-size: .8em;
    font-weight: normal;
    font-family: verdana,sans-serif;
    border-bottom: 1px solid #ccc;
    line-height: .8;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<!--
ISOTOPE SORTING
Remove accents for sorting 

by http://mi-ca.ch
3rd feb. 2015
-->
<button class="alpha">alpha</button>
<button class="original-order">original order</button>
<button class="orderby asc">ASC</button>
<div class="wall">
    <div class="item">
        <h2>ï</h2>
    </div>
    <div class="item">
        <h2>z</h2>
    </div>
    <div class="item">
        <h2>a</h2>
    </div>
    <div class="item">
        <h2>b</h2>
    </div>
    <div class="item">
        <h2>y</h2>
    </div>
    <div class="item">
        <h2>c</h2>
    </div>
    <div class="item">
        <h2>x</h2>
    </div>
    <div class="item">
        <h2>d</h2>
    </div>
    <div class="item">
        <h2>w</h2>
    </div>
    <div class="item">
        <h2>e</h2>
    </div>
    <div class="item">
        <h2>v</h2>
    </div>
    <div class="item">
        <h2>f</h2>
    </div>
    <div class="item">
        <h2>u</h2>
    </div>
    <div class="item">
        <h2>g</h2>
    </div>
    <div class="item">
        <h2>t</h2>
    </div>
    <div class="item">
        <h2>i</h2>
    </div>
    <div class="item">
        <h2>j</h2>
    </div>
    <div class="item">
        <h2>s</h2>
    </div>
    <div class="item">
        <h2>r</h2>
    </div>
    <div class="item">
        <h2>k</h2>
    </div>
    <div class="item">
        <h2>é</h2>
    </div>
    <div class="item">
        <h2>è</h2>
    </div>
    <div class="item">
        <h2>q</h2>
    </div>
    <div class="item">
        <h2>p</h2>
    </div>
    <div class="item">
        <h2>l</h2>
    </div>
    <div class="item">
        <h2>o</h2>
    </div>
    <div class="item">
        <h2>m</h2>
    </div>
    <div class="item">
        <h2>n</h2>
    </div>
</div>

例如：http://jsfiddle.net/mica/fduz9c3p/

Answer 1

我找到一个删除重音字符的原型

＆＃13;

＆＃13;

/** 
 * Remove Accents to a string 
 */
String.prototype.removeAccents = function(){
  return this
  .toLowerCase()
  .replace(/[áàãâä]/gi,"a")
  .replace(/[éèëê]/gi,"e")
  .replace(/[íìïî]/gi,"i")
  .replace(/[óòöôõø]/gi,"o")
  .replace(/[úùüû]/gi, "u")
  .replace(/[ç]/gi, "c")
  .replace(/[ñ]/gi, "n")
  .replace(/[^a-zA-Z0-9]/g," ");
}

＆＃13;

＆＃13;

＆＃13; 这是一个工作示例：

＆＃13;

＆＃13;

/** 
 * Remove Accents to a string
 */
String.prototype.removeAccents = function() {
  return this
    .toLowerCase()
    .replace(/[áàãâä]/gi, "a")
    .replace(/[éèëê]/gi, "e")
    .replace(/[íìïî]/gi, "i")
    .replace(/[óòöôõø]/gi, "o")
    .replace(/[úùüû]/gi, "u")
    .replace(/[ç]/gi, "c")
    .replace(/[ñ]/gi, "n")
    .replace(/[^a-zA-Z0-9]/g, " ");
}

/* Set isotope */
var $container = $('.wall').isotope({
  itemSelector: '.item',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.item',
    gutter: 30
  },
  // prepare sorting data
  getSortData: {
    // this function find h2 and remove accents 
    name: function(itemElem) { // function
      return String($(itemElem).find('h2').text()).removeAccents();
    }
  }

})
$('button.alpha').on('click', function() {
  $container.isotope({
    sortBy: 'name',
    sortAscending: getOrderBy()
  });
})
$('button.original-order').on('click', function() {
  $container.isotope({
    sortBy: 'original-order',
    sortAscending: getOrderBy()
  });
})
$('button.orderby').on('click', switchOrderBy);

function getOrderBy() {
  return $('.orderby').hasClass('asc');
}

function switchOrderBy() {
  $('.orderby').toggleClass('asc');
  $('.orderby').text(($('.orderby').hasClass('asc')) ? 'ASC' : 'DESC');
  $container.isotope({
    sortBy: 'name',
    sortAscending: getOrderBy()
  });

}

＆＃13;

.item {
  font-size: .8em;
  font-weight: normal;
  font-family: verdana, sans-serif;
  border-bottom: 1px solid #ccc;
  line-height: .8;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<!--
ISOTOPE SORTING
Remove accents for sorting 

by http://mi-ca.ch
3rd feb. 2015
-->
<button class="alpha">alpha</button>
<button class="original-order">original order</button>
<button class="orderby asc">ASC</button>
<div class="wall">
  <div class="item">
    <h2>ï</h2>
  </div>
  <div class="item">
    <h2>z</h2>
  </div>
  <div class="item">
    <h2>a</h2>
  </div>
  <div class="item">
    <h2>b</h2>
  </div>
  <div class="item">
    <h2>y</h2>
  </div>
  <div class="item">
    <h2>c</h2>
  </div>
  <div class="item">
    <h2>x</h2>
  </div>
  <div class="item">
    <h2>d</h2>
  </div>
  <div class="item">
    <h2>w</h2>
  </div>
  <div class="item">
    <h2>e</h2>
  </div>
  <div class="item">
    <h2>v</h2>
  </div>
  <div class="item">
    <h2>f</h2>
  </div>
  <div class="item">
    <h2>u</h2>
  </div>
  <div class="item">
    <h2>g</h2>
  </div>
  <div class="item">
    <h2>t</h2>
  </div>
  <div class="item">
    <h2>i</h2>
  </div>
  <div class="item">
    <h2>j</h2>
  </div>
  <div class="item">
    <h2>s</h2>
  </div>
  <div class="item">
    <h2>r</h2>
  </div>
  <div class="item">
    <h2>k</h2>
  </div>
  <div class="item">
    <h2>é</h2>
  </div>
  <div class="item">
    <h2>è</h2>
  </div>
  <div class="item">
    <h2>q</h2>
  </div>
  <div class="item">
    <h2>p</h2>
  </div>
  <div class="item">
    <h2>l</h2>
  </div>
  <div class="item">
    <h2>o</h2>
  </div>
  <div class="item">
    <h2>m</h2>
  </div>
  <div class="item">
    <h2>n</h2>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/mica/edfr00aj/1/