如何用JQuery对DIV进行字母排序

Question

我需要根据div成员名中的姓氏对div进行排序。

它只能比较姓氏，而不能比较名字。

另外，我必须把它放在页脚或页眉，因为我在Wordpress上。我想JQuery已经装好了。非常感谢

<ul>
<li>
    <div class="team-member">
      <div class="member-img"><a #POST_LINK#><img src="IHC_AVATAR" alt=""/></a></div>
       <div class="member-content">
            <div class="member-name"  data-lastname="IHC_LAST_NAME"><a #POST_LINK#>IHC_FIRST_NAME IHC_LAST_NAME</a></div>   
    </div>
</li>
<li>    
    <div class="team-member">
      <div class="member-img"><a #POST_LINK#><img src="IHC_AVATAR" alt=""/></a></div>
       <div class="member-content">
            <div class="member-name"  data-lastname="IHC_LAST_NAME"><a #POST_LINK#>IHC_FIRST_NAME IHC_LAST_NAME</a></div>   
    </div>
 </li>
<li>  
    <div class="team-member">
      <div class="member-img"><a #POST_LINK#><img src="IHC_AVATAR" alt=""/></a></div>
       <div class="member-content">
            <div class="member-name"  data-lastname="IHC_LAST_NAME"><a #POST_LINK#>IHC_FIRST_NAME IHC_LAST_NAME</a></div>   
    </div>
</li>
</ul>

Answer 1

您应该将所有内容包装在容器中，例如，在具有.container类的div中

<div class="container">
    <div class="team-member" ...

然后稍微更新一下您提供的JS代码，以便对.member-name而不是.title的内容进行排序。

var alphabeticallyOrderedDivs = $('.member-name').sort(function(a, b) {
...

http://jsfiddle.net/yapu9a6m/4/

请检查代码中.team-member div的结束标记。我在jsfiddle中修复了它们。

Answer 2

我创建了一个demo，用于在基本成员名称文本中排序您的html：

<div  id="ordena">
<div class="team-member">
<div class="member-img">
    <div class="member-content">
    <div class="member-name"><a  href="#" target="_blank">John Doe</a></div>    
  </div>
</div>

<div class="team-member">
<div class="member-img">
    <div class="member-content">
    <div class="member-name"><a  href="#" target="_blank">John Boe</a></div>    
  </div>
</div>

<div class="team-member">
<div class="member-img">
    <div class="member-content">




 var elms = [], 
cloned = $('.team-member:eq(0)');
$('.team-member .member-name').each(function(){
elms.push({name: $(this).text(), lastname:$(this).text().split(' ').splice(1).join(' ')} );

});
function sortByLastName(a,b) {
  if (a.lastname.toLowerCase() < b.lastname.toLowerCase())
    return -1;
  if (a.lastname.toLowerCase() > b.lastname.toLowerCase())
    return 1;
  return 0;
}
elms.sort(sortByLastName);
$('#ordena').html('');
for(var i=0; i<elms.length; i++){
cloned
  .clone()
  .text(elms[i].name)
  .appendTo("#ordena");
}

Answer 3

我猜，如果你只想处理姓氏，那么你应该在单独的变量中从后端获取姓氏。所以使用HTML5标签，我只修改了很小的结构。

  <div class="container">
    <div class="entry">
        <div class="title" data-lastname="blastname">World blastname</div>
        <div class="description">text1</div>
    </div>

    <div class="entry">
        <div class="title" data-lastname="alastname">hello alastname</div>
        <div class="description">text2</div>
    </div>

    <div class="entry">
        <div class="title" data-lastname="dlastname">Lorem dlastname</div>
        <div class="description">text3</div>
    </div>
</div>

    var alphabeticallyOrderedDivs = $('.title').sort(function(a, b) {
        return 
    String.prototype.localeCompare.call($(a).data('lastname').toLowerCase(), 
       $(b).data('lastname').toLowerCase());
    });

    var container = $(".container");
    container.detach().empty().append(alphabeticallyOrderedDivs);
    $('body').append(container);

希望它能有所帮助:)。如果你想使用相同的html结构，那么使用js regx需要花费大量的时间和精力。