Сортировать вложенные div внутри неупорядоченного списка

Question

У меня есть следующий html ul:

<ul id="actionList">
  <li>
  <span>
    <h4>xyz</h4>
    <div class="list">
      <div class="item">
        <p class="title">test2</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
      <div class="item">
        <p class="title">test3</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
      <div class="item">
        <p class="title">test1</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
    </div>
  </span>
  </li>
  <li>
    <span>
      <h4>abc</h4>
      <div class="list">
        <div class="item">
          <p class="title">test5</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
        <div class="item">
          <p class="title">test4</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
        <div class="item">
          <p class="title">test6</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
      </div>
    </span>
  </li>
</ul>

Я пытаюсь отсортировать .item div в алфавитном порядке на основе .title div.

Что япробовал:

var alphabeticallyOrderedDivs = $('.item').sort(function(a, b) {
    var $aTitle = $(a).find('.title'), $bTitle = $(b).find('.title');
  return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
});

var container = $(".list");
container.detach().empty().append(alphabeticallyOrderedDivs);
container.parent().append(container);

К сожалению, похоже, ничего не получается.

Я думаю, что это связано с тем фактом, что .list является классом, а не id, и, следовательно, их несколько.

Я попытался заменить container.parent() на $('body'), просто чтобы посмотреть, выводит ли он вообще что-либо, и обнаружил, что это сортировка .item делений ... просто сбор их всех и сортировка.Это привело к тому, что у него было два набора всех тестов {1-6}.

Возможно ли это сделать?

Answer 1

Предположим, вы хотите заказать each .list отдельно:

$('.list').each(function() {
  // find .item's inside 'this' div
  divs = $('.item', this).sort(function(a, b) {
    // get immediate .title children
    return $(a).children('.title').text() > $(b).children('.title').text()
  })
  // replace contents of this .list with ordered divs
  $(this).html(divs)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="actionList">
  <li>
    <span>
    <h4>xyz</h4>
    <div class="list">
      <div class="item">
        <p class="title">test2</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
      <div class="item">
        <p class="title">test3</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
      <div class="item">
        <p class="title">test1</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
    </div>
  </span>
  </li>
  <li>
    <span>
      <h4>abc</h4>
      <div class="list">
        <div class="item">
          <p class="title">test5</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
        <div class="item">
          <p class="title">test4</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
        <div class="item">
          <p class="title">test6</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
      </div>
    </span>
  </li>
</ul>

Answer 2

Ваша функция использует неверные идентификаторы / классы?

Вы можете использовать это:

// loop through all .list
$('.list').each(function() {
  // loop through all .item inside .list
  $(this).find('.item').sort(function(a, b) {
    // test .title text
    if ($(a).find('.title').text() < $(b).find('.title').text()) {
      return -1;
    } else {
      return 1;
    }
  // append sort to .list
  }).appendTo($(this));
});

$('.list').each(function() {
  $(this).find('.item').sort(function(a, b) {
    if ($(a).find('.title').text() < $(b).find('.title').text()) {
      return -1;
    } else {
      return 1;
    }
  }).appendTo($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="actionList">
  <li>
    <span>
    <h4>xyz</h4>
    <div class="list">
      <div class="item">
        <p class="title">test2</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
      <div class="item">
        <p class="title">test3</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
      <div class="item">
        <p class="title">test1</p>
        <button class="deleteButton" tabindex="-1">Delete</button>
      </div>
    </div>
  </span>
  </li>
  <li>
    <span>
      <h4>abc</h4>
      <div class="list">
        <div class="item">
          <p class="title">test5</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
        <div class="item">
          <p class="title">test4</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
        <div class="item">
          <p class="title">test6</p>
          <button class="deleteButton" tabindex="-1">Delete</button>
        </div>
      </div>
    </span>
  </li>
</ul>