Question

我需要根据div member-name中的姓氏对DIVS进行排序。

它必须只比较姓氏而不是名字。

此外，我必须将它放在页脚或标题中，因为我在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

您应该将所有内容都包装在容器中，例如在div中使用类.container：

<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

我在基本的memeber-name文本中订购了你的html demo：

<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需要花费很多时间和精力。

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

3 个答案: