javascript - 使用jQuery根据文本详细信息对div排序

Question

我有多个同类的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>

当用户单击某个图标时，“row clearfix” div应按用户在class =“employe-name”中的姓氏进行升序和降序排序。

我应该如何分类和显示div？

Answer 1

代码将是这样的(未执行)

$('.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);
    }
});