Question

我需要根据内容重新排列一些元素。更确切地说，基于.extrafield-name内容。下面的html代码显示了默认顺序中包含一些虚拟值的所有元素。可能会使这一点变得更加困难的一点是它们只会显示是否为它们赋值。

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

我把它们都放在一个数组中，但是我需要一种正确的方法来对它们进行排序。

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

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

订单：战斗，胜利，损失，抽签，重量

Answer 1

将所需的顺序放在数组中，然后根据.class-info-content文本索引将.extrafield-name DIV排序到该数组中。

排序后，可以在他们的.class-info-content部分之后简单地插入DIV：

$('.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'));
});

＆＃13;

$('.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'));
});

＆＃13;

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

＆＃13;

jQuery - 根据内容重新排列元素

1 个答案: