Need script that sorts <div> items in alphabetically order by last name

JavaScript
1

I have form where I want to sort each person by their last name alphabetically. I’m not sure how to do that. The form has a list of people/images in 4 rows.

Here is a sample of some of my code:

<div id="about-team">
    <div id="content" class="content full">

		<div class="our-partners">
			<div class="container">
				<h2 class="title"><small>Meet our</small> LEADERSHIP TEAM</h2>
				<div class="row">

          <div class="col-sm-12">

            <div class="management-content">

             

              <div class="content-item">
                <div class="description" style="text-align: center;">
                  <img src="images/Bio/RPlutzer.jpg" alt="" class="img-thumbnail">
                  <div class="topic">R Plutzer</div>
                  <div class="discussion">Chief Financial Officer</div>
                </div>
              </div>

              <div class="content-item">
                <div class="description" style="text-align: center;">
                  <img src="images/Bio/BWalls.jpg" alt="" class="img-thumbnail">
                  <div class="topic">B Walls</div>
                  <div class="discussion">VP of Operations</div>
                </div>
              </div>

              <div class="content-item">
                <div class="description" style="text-align: center;">
                  <img src="images/Bio/FMalagisi.jpg" alt="" class="img-thumbnail">
                  <div class="topic">FMalagisi</div>
                  <div class="discussion">VP of Finance</div>
                </div>
              </div>

              <div class="content-item">
                <div class="description" style="text-align: center;">
                  <img src="images/Bio/tsutton.jpg" alt="" class="img-thumbnail">
                  <div class="topic">TSutton</div>
                  <div class="discussion">VP OF IT</div>
                </div>
              </div>

              <div class="content-item">
                <div class="description" style="text-align: center;">
                    <img src="images/Bio/JDillon.jpg" alt="" class="img-thumbnail">
                    <div class="topic">J Dillon</div>
                    <div class="discussion">Fleet Manager</div>
                </div>
              </div>

              <div class="content-item">
                <div class="description" style="text-align: center;">
                    <img src="images/Bio/EEwbank.jpg" alt="" class="img-thumbnail">
                    <div class="topic">E Ewbank</div>
                    <div class="discussion">Sales Director</div>
                </div>
              </div>

              <div class="content-item">
                <div class="description" style="text-align: center;">
                    <img src="images/Bio/GGlassley.jpg" alt="" class="img-thumbnail">
                    <div class="topic">G Glassley</div>
                    <div class="discussion">Operational Efficiency Manager</div>
                </div>
              </div>

              <div class="content-item">
                <div class="description" style="text-align: center;">
                    <img src="images/Bio/KLottGratz.jpg" alt="" class="img-thumbnail">
                    <div class="topic">K Lott-Gratz</div>
                    <div class="discussion">Collections Resolution Coordinator</div>
                </div>
              </div>


              <div class="content-item">
                <div class="description" style="text-align: center;">
                    <img src="images/Bio/PMcLaughlin.jpg" alt="" class="img-thumbnail">
                    <div class="topic">PMcLaughlin</div>
                    <div class="discussion">Financial Planning & Control Manager</div>
                </div>
              </div>

 
              </div>

             



            </div>

            <!-- End -->

          </div>

				</div>
			</div>
		</div>
	</div>
</div>

I’m thinking some sort of javascript but not sure how to do this.

2

why would you not just… put them in the order you want them?

3

Because the names could change and writing a script is just better that way.

4

Where is the data coming from, is it from a database or put manually into the html?

5

If you want to sort them by last name, obviously that information will need to be available to any script that works with it. Personally I would do this server-side but because you posted in the JavaScript category I’ll assume you want to do it cient-side.

It looks like “last name” exists in both the image file name and the adjacent sibling div tag. It would be relatively easy for JavaScript to get the values from those, but a problem I see straight away is that those values are not last name but name with no easy way to isolate only the last name.

Are you currently populating the page manually editing it every time one is added or removed?

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.