CODEWITHSUNDEEP
jquery
Ciprian
Ciprian

Reputation: 3226

jQuery - Rearrange elements based on their content

I need to rearrange some elements based on their content. More exactly bases on the .extrafield-name content. The below html code shows all the elements in their default order with some dummy values. Something that might make this a bit more difficult is that they only show up if value is assigned to them.

<section class="class-info">
    <div class="class-info-title">
        <h4>Fighter Information</h4>
    </div>
    <div class="class-info-content">
        <div class="info-content">
            <span class="extrafield-name">Weight: </span>
            <span class="extrafield-value">114 lbs</span>
        </div>
    </div>
    <div class="class-info-content">
        <div class="info-content">
            <span class="extrafield-name">Losses: </span>
            <span class="extrafield-value">99</span>
        </div>
    </div>
    <div class="class-info-content">
        <div class="info-content">
            <span class="extrafield-name">Wins: </span>
            <span class="extrafield-value">99</span>
        </div>
    </div>
    <div class="class-info-content">
        <div class="info-content">
            <span class="extrafield-name">Fights: </span>
            <span class="extrafield-value">8</span>
        </div>
    </div>
    <div class="class-info-content">
        <div class="info-content">
            <span class="extrafield-name">Draws: </span>
            <span class="extrafield-value">99</span>
        </div>
    </div>
</section>

I got them all in an array, but I need a correct way to sort them. 

var all = $(".class-info-content").map(function() {
    return this.innerHTML;
}).get();

//console.log(all.join());
console.log(all[0]);

Order: Fights, Wins, Losses, Draws, Weight

Upvotes: 0

Views: 328

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Place the desired order in an array, then sort the .class-info-content DIVs based on their .extrafield-name text's index into that array.

Once sorted, the DIVs can simply be inserted after their section's .class-info-content:

$('.class-info').each(function() {
  $(this).find('.class-info-content')
    .sort(function(a, b) {
      var order = ['Fights:', 'Wins:', 'Losses:', 'Draws:', 'Weight:'],
          posa = order.indexOf($(a).find('.extrafield-name').text().trim()),
          posb = order.indexOf($(b).find('.extrafield-name').text().trim());
      return posa - posb;
     })
    .insertAfter($(this).find('.class-info-title'));
});


$('.class-info').each(function() {
  $(this).find('.class-info-content')
    .sort(function(a, b) {
      var order = ['Fights:', 'Wins:', 'Losses:', 'Draws:', 'Weight:'],
          posa = order.indexOf($(a).find('.extrafield-name').text().trim()),
          posb = order.indexOf($(b).find('.extrafield-name').text().trim());
      return posa - posb;
     })
    .insertAfter($(this).find('.class-info-title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="class-info">
  <div class="class-info-title">
    <h4>Fighter Information</h4>
  </div>
  <div class="class-info-content">
    <div class="info-content">
      <span class="extrafield-name">Weight: </span>
      <span class="extrafield-value">114 lbs</span>
    </div>
  </div>
  <div class="class-info-content">
    <div class="info-content">
      <span class="extrafield-name">Losses: </span>
      <span class="extrafield-value">99</span>
    </div>
  </div>
  <div class="class-info-content">
    <div class="info-content">
      <span class="extrafield-name">Wins: </span>
      <span class="extrafield-value">99</span>
    </div>
  </div>
  <div class="class-info-content">
    <div class="info-content">
      <span class="extrafield-name">Fights: </span>
      <span class="extrafield-value">8</span>
    </div>
  </div>
  <div class="class-info-content">
    <div class="info-content">
      <span class="extrafield-name">Draws: </span>
      <span class="extrafield-value">99</span>
    </div>
  </div>
</section>

Upvotes: 2

Related Questions