Как я могу отсортировать список в алфавитном порядке с помощью jQuery?

Я думаю, что проблема в вашем изображении в цикле и маршрутах

Некоторые изменения в представлении и итерации по @job.images

Это без удаленного: true

< / blockquote>
<% if @job.images.attached? %>
  <br/>

  <div class="row">
    <% @job.images.each do |image| %>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading preview">
          <%= image_tag(image) %>
        </div>
        <div class="panel-body">
          <span class="pull-right">
            <%=
            link_to 'Remove', delete_image_attachment_job_url(image_id: image)
            method: :delete,
            data: {confirm: "Are you sure"} do %>
              <i class="fa fa-trash-o" aria-hidden="true"></i>
            <% end %>
          </span>
        </div>
      </div>
    </div>
    <% end %>
  </div>
<% end %>

Контроллер

  def delete_image_attachment
    @image = ActiveStorage::Attachment.find(params[:image_id])
    @image.purge
    redirect_back(fallback_location: request.referer)
  end
231
задан Shog9 15 October 2010 в 08:30
поделиться

3 ответа

Вам не нужен jQuery для этого ...

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

Простота использования ...

sortUnorderedList("ID_OF_LIST");

Живая демонстрация →

105
ответ дан 23 November 2019 в 03:36
поделиться

улучшение на основе Jeetendra Chauhan ответ

$('ul.menu').each(function(){
    $(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});

, почему я считаю это улучшением:

  1. использование each для поддержки работы больше чем одной ул.

  2. использование children('li') вместо ('ul li') важно, потому что мы только хотим обработать прямых детей и не потомков

  3. использование функции стрелки (a,b)=> просто взгляды лучше (IE, не поддерживаемый)

  4. ваниль использования innerText вместо $(a).text() для улучшения скорости

  5. , ваниль использования localeCompare улучшает скорость в случае равных элементов (редкий в реальном использовании)

  6. , использование appendTo(this) вместо того, чтобы использовать другой селектор удостоверится, что, даже если селектор ловит больше чем одну ул. все еще, ничто не повреждается

0
ответ дан 23 November 2019 в 03:36
поделиться

Примерно так:

var mylist = $('#myUL');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

На этой странице: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Приведенный выше код отсортирует ваш неупорядоченный список с идентификатором myUL.

ИЛИ вы можете использовать такой плагин, как TinySort. https://github.com/Sjeiti/TinySort

326
ответ дан 23 November 2019 в 03:36
поделиться
Другие вопросы по тегам:

Похожие вопросы: