2

I need to sort DIVS depending on last name in div member-name.

It must compare only last name and not first name.

Also I must place it in footer or header because i am on Wordpress. I think JQuery is already loaded. Thanks a lot

<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>
Improve this question
1
  • here it works without adding JS in settings but when adding jQuery it does not work anymore ...jsfiddle.net/xo5nopyx Commented Oct 26, 2017 at 16:41

3 Answers 3

Reset to default
2

You should wrap everything in a container, for example in a div with class .container:

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

And then slightly update the JS code you provided to sort the content of .member-name instead of .title.

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

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

Please check the closing tags of .team-member divs in your code. I fixed them in the jsfiddle.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

thanks i think i have updated my question when you answer. I need to only sort by LAST NAME...
well that raises some questions.. what do you mean with last name? for example, it can't be just the last word. what if my name is "Carlo Maria De Rossi"? in this case, the last name is "de rossi", which is the last 2 words
yes you right...If it helps i can add with php a separator like * for example, that must be hidden after the sorting
if you can manipulate the output, why don't you put the last name before the first one (Doe John)? that would solve the problem. Another solution is to have a markup like <span class="firstname">John</span> <span class="lastname">Doe</span>
thanks have updated the html that i have and i think @rawsun solution is good , using data-lastname , don't you think ?
|
0

I guess that if you only want to do with last name then you should get last name from backend in separate variable. So with HTML5 tag i have modified just little structure.

  <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);

Hope it helps :). If you want to use html same structure then will take time and lots of efforts using js regx.

Improve this answer

1 Comment

Comments are not for extended discussion; this conversation has been moved to chat.
0

I made a demo for order your html in base memeber-name text: 

<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");
}
Improve this answer

6 Comments

thanks a lot, is it possible without using ordena ? It's true that there will be a problem with name like John Fitzgerald Kennedy. If it helps i can display a separator like John Fitzgerald * Kennedy
yes the last name will have copuosed, then you'll need to use a regex or any to obtain the last name, and change ordena like you want @Pipoo
@Pipoo is update post for last names like you told and chage ordena
thanks have updated the html that i have and i think @rawsun solution is good , using data-lastname , don't you think ?
more easy for you sure, but i like think how would be done, not the final solution
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.