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 div进行排序...只是将它们全部收集并排序他们。这导致它具有两组所有测试{1-6}。

这甚至有可能实现吗？

Answer 1

您的函数使用了错误的ID /类？

您可以使用此：

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

Answer 2

假设您要单独订购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>

在无序列表中对嵌套的div进行排序

2 个答案: