Question

我有一个YouTube视频库，当我在桌面上添加更多视频时，我希望视频按字母顺序自动排序，使用class =＆＃34; title＆＃34;

＆＃13;

var myTable = $('#dnn_ctr390_View_dlList');
var myGallery = myTable.find('.title');
myGallery.sort(function(a, b) {
  return
  $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(myGallery, function(idx, itm) {
  myTable.append(itm);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DnnC">
  <table id="dnn_ctr390_View_dlList" class="dnnc_listStyle" cellspacing="3" cellpadding="3" style="width:100%;">
    <tbody>
      <tr>
        <td class="dnnc_listItemStyle">
          <div class="DnnC_item">

            <div class="title"> Z Title</div>
            <div class="preview">
              <a href="http://www.youtube.com/watch?v=shluYa5WDUQ?rel=0&amp;controls=0&amp;showinfo=0" rel="prettyPhoto[pp_gal]"> <img src="http://img.youtube.com/vi/shluYa5WDUQ/0.jpg" width="350px">
              </a>
            </div>
          </div>

        </td>
        <td class="dnnc_listItemAltStyle">

          <div class="DnnC_item">
            <div class="title"> Funny Cats</div>
            <div class="preview">
              <a href="http://www.youtube.com/watch?v=8HVWitAW-Qg?rel=0&amp;controls=0&amp;showinfo=0" rel="prettyPhoto[pp_gal]"> <img src="http://img.youtube.com/vi/8HVWitAW-Qg/0.jpg" width="350px">
              </a>
            </div>
          </div>

        </td>
        <td class="dnnc_listItemStyle">

          <div class="DnnC_item">
            <div class="title"> A Title</div>
            <div class="preview">
              <a href="http://www.youtube.com/watch?v=BtHbMlScVwY?rel=0&amp;controls=0&amp;showinfo=0" rel="prettyPhoto[pp_gal]"> <img src="http://img.youtube.com/vi/BtHbMlScVwY/0.jpg" width="350px">
              </a>
            </div>
          </div>

        </td>
      </tr>
    </tbody>
  </table>

</div>

＆＃13;

我的javascript / jquery非常基础。我的代码似乎只是将.title从表格的主体中取出而不是将其放在图像上方，而且它没有对项目进行排序。

Answer 1

试用此代码，最初来自here并由我编辑：

var vids = $("#dnn_ctr390_View_dlList td"); // Puts all your td's into an array

$(function(){ // When the page loads...
  var alphabeticallyOrderedVids = vids.sort(function (a, b) {
    return $(a).find(".title").text() > $(b).find(".title").text();
  }); // Use the 'sort' function to compare each vid's title to the next
  $("#dnn_ctr390_View_dlList tr").html(alphabeticallyOrderedVids); // Replace the old td's with the newly sorted td's
});

自动对表<div>项进行排序

1 个答案: