使用jQuery根据文本细节对div进行排序

时间:2015-06-02 12:07:55

标签: javascript jquery sorting grails

我有多个具有相同类别的div

<div class="row clearfix">
  <div class="col-md-5" >
      <div class='form-group employe-detail'>
          <input type="hidden" name="user[${i}].userId" value="${member?.user?.id }">
<p>
   <span class="employe-name" >${member?.user?.lastname}, ${member?.user?.firstname}</span>
    <span  class="employe-post" >${member?.jobTitle } </span>
<p>
      </div>
             </div>
   <div class="col-md-2">
                <div class='form-group employe-admin-contactP mb-5'>
                    <input type="checkbox" class="readymade-checkbox radio contact" name="user[${i}].isContact" id="contact-${member?.user?.id }"
                        <g:if test="${member?.isContactPerson()}">
                            checked
                        </g:if>
                    />
                    <label for="contact-${member?.user?.id }"  class="readymade-label"></label>
                </div>
            </div>
        </div>

当用户点击某个图标时,&#34;行clearfix&#34; div应该是按类中用户姓氏排序升序和降序=&#34; employe-name&#34;。

我该如何进行排序并显示div?

1 个答案:

答案 0 :(得分:0)

代码将是这样的(没有执行)

$('.someiconclass').click(function(){
    // sort first 
    var lnames = [];
    $('.row').each(function(){
        lnames.push[$(this).find('.employe-name').html().split(',')[0]];
    });
    lnames.sort();

    // arrange accordingly
    var alldivs = $('#parentId').clone(true);
    $('#parentId').empty();

    for(var i=0; i<lnames.length;i++){
       var rowdiv = $('.row').filter(function(ele){ return $(ele).find('.employe-name').html().split(',')[0] == lnames[i]; });
       $('#parentId').append(rowdiv);
    }
});