基于标题和类型的 appendTo

Question

我需要根据系列标题和歌曲类型对歌曲进行排序。

我正在使用 jQuery UI 菜单：

<ul id="menu"></ul>

for(y = 0; y<tytuly.length; y++){
    $('<li><div>'+tytuly[y]+'</div><ul><li><div>Openingi</div><ul id="ops'+y+'"></ul></li><li><div>Endingi</div><ul id="eds'+y+'"></ul></li><li><div>Inserty</div><ul id="ins'+y+'"></ul></li></ul></li>').appendTo('#menu');
}

我使用 Ajax（示例数据）加载内容：[{"nr_wpisu":"1","id":"39","typ":"1","link":"https:\/\/animethemes.moe\/video\/KakumeikiValvrave-OP1.webm","tytul_autor":"Preserved Roses","tytul":"Kakumeiki Valvrave"},{"nr_wpisu":"43","id_anime":"36","typ":"2","link":"https:\/\/animethemes.moe\/video\/MaouGakuinNoFutekigousha-ED1.webm","tytul_autor":"Hamidashimono - Tomori Kusunoki","tytul":"Maou Gakuin no Futekigousha: Shijou Saikyou no Maou no Shiso, Tensei shite Shison-tachi no Gakkou e"}]

在加载的内容中，标题id相同的记录很少，所以我做了一个没有副本的数组然后我有歌曲列表，我必须按 title/title_id 及其类型排序，然后将其附加到正确的 <ul>

之前我用的是：

var tytuly = ["title","title2","title3","title4","title5","title6","title7","title8","title9"]; 
for(y = 0; y<tytuly.length; y++){
$('<li><div>'+tytuly[y]+'</div><ul><li><div>Openingi</div><ul id="ops'+y+'"></ul></li><li><div>Endingi</div><ul id="eds'+y+'"></ul></li><li><div>Inserty</div><ul id="ins'+y+'"></ul></li></ul></li>').appendTo('#menu');
            }
                $(function(){
        $("#menu").menu();
      });
     
      var unflist = [];
      var link = ["link","link","link","link","link","link","link","link","link"];
    var type = [1,1,2,2,2,3,3,1,1];
    var tyt_art = ["test","test","test","test","test","test","test","test","test"];
    for (q = 0; q <= 8; q++) {
      if (type[q] == 1) {
        $('<li class="op' + q + '"></li>').appendTo('body #ops');
        $('<div/>').text(tyt_art[q]).appendTo('body .op' + q);
      }
      if (type[q] == 2) {
        $('<li class="ed' + q + '"></li>').appendTo('body #eds');
        $('<div/>').text(tyt_art[q]).appendTo('body .ed' + q);
      }
      if (type[q] == 3) {
        $('<li class="ins' + q + '"></li>').appendTo('body #ins');
        $('<div/>').text(tyt_art[q]).appendTo('body .ins' + q);
      }
      unflist.push(link[q]);
    }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="menu">
</ul>

It should look like this

但是此时排序有问题。 [在此处输入图片描述][3]

Answer 1

您似乎有 4 个没有关系的数组：

var tytuly = ["title","title2","title3","title4","title5","title6","title7","title8","title9"]; 
var link = ["link","link","link","link","link","link","link","link","link"];
var type = [1,1,2,2,2,3,3,1,1];
var tyt_art = ["test","test","test","test","test","test","test","test","test"];

不建议这样做。我建议将其调整为对象数组。

var ty = [{
  title: "title 1",
  link: "link 1",
  type: 1,
  art: "test 1"
},{
  title: "title 2",
  link: "link 2",
  type: 1,
  art: "test 2"
},{
  title: "title 3",
  link: "link 3",
  type: 2,
  art: "test 3"
},{
  title: "title 4",
  link: "link 4",
  type: 2,
  art: "test 4"
},{
  title: "title 5",
  link: "link 5",
  type: 2,
  art: "test 5"
},{
  title: "title 6",
  link: "link 6",
  type: 3,
  art: "test 6"
},{
  title: "title 7",
  link: "link 7",
  type: 3,
  art: "test 7"
},{
  title: "title 8",
  link: "link 8",
  type: 1,
  art: "test 8"
},{
  title: "title 9",
  link: "link 9",
  type: 1,
  art: "test 9"
}];

这样整理你的数据，你可以更方便地使用它。如果您想按特定类型排序，可以使用比较函数 .sort() 来完成此操作。

var ty = [{
    title: "title 1",
    link: "link 1",
    type: "1",
    art: "test 1"
  }, {
    title: "title 2",
    link: "link 2",
    type: "1",
    art: "test 2"
  }, {
    title: "title 3",
    link: "link 3",
    type: "2",
    art: "test 3"
  }, {
    title: "title 4",
    link: "link 4",
    type: "2",
    art: "test 4"
  }, {
    "nr_wpisu": "1",
    "id": "39",
    "type": "1",
    "link": "https:\/\/animethemes.moe\/video\/KakumeikiValvrave-OP1.webm",
    art: "Preserved Roses",
    title: "Kakumeiki Valvrave"
  }, {
    "nr_wpisu": "43",
    "id_anime": "36",
    "type": "2",
    "link": "https:\/\/animethemes.moe\/video\/MaouGakuinNoFutekigousha-ED1.webm",
    art: "Hamidashimono - Tomori Kusunoki",
    title: "Maou Gakuin no Futekigousha: Shijou Saikyou no Maou no Shiso, Tensei shite Shison-tachi no Gakkou e"
  }, {
    title: "title 7",
    link: "link 7",
    type: "3",
    art: "test 7"
  },
  {
    title: "title 8",
    link: "link 8",
    type: "1",
    art: "test 8"
  }, {
    title: "title 9",
    link: "link 9",
    type: "1",
    art: "test 9"
  }, {
    title: "Song 1",
    link: "link 10",
    type: null,
    art: "Test 10"
  }
];

function popMenu(tObj, myData) {
  var op = $("<li>").html("<div>Openingi</div>").appendTo(tObj);
  $("<ul>", {
    id: "op"
  }).insertAfter($("div", op));
  var ed = $("<li>").html("<div>Endingi</div>").appendTo(tObj);
  $("<ul>", {
    id: "ed"
  }).insertAfter($("div", ed));
  var ins = $("<li>").html("<div>Inserty</div>").appendTo(tObj);
  $("<ul>", {
    id: "ins"
  }).insertAfter($("div", ins));
  $.each(myData, function(i, t) {
    switch (t.type) {
      case "1":
        $('<li>', {
          class: "op-" + i
        }).appendTo($("ul", op));
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo($('.op-' + i, tObj));
        break;
      case "2":
        $('<li>', {
          class: "ed-" + i
        }).appendTo($("ul", ed));
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo($('.ed-' + i, tObj));
        break;
      case "3":
        $('<li>', {
          class: "ins-" + i
        }).appendTo($("ul", ins));
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo($('.ins-' + i, tObj));
        break;
      default:
        var s = $('<li>').appendTo(tObj);
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo(s);
    }
  });
}


$(function() {
  popMenu($("#menu"), ty);
  $("#menu").menu();
});

#menu {
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="menu">
</ul>

参考链接：

Answer 2

我正在发布答案，也许有一天会有人需要它：

 var currentTitleNumber;
        var q;
        for(q = 0; q<tytuly.length;q++){
    
     if(q == $.inArray(tytuly[q], tytuly)){
      currentTitleNumber = q;
    for(o = 0; o <=ostlength; o++){
      if(typ[o] == 1 && allTytuly[o] == tytuly[q]){
             $('<li class="op'+o+'"></li>').appendTo('body #ops'+currentTitleNumber);
             $('<div/>').text(tyt_art[o]).appendTo('body .op'+o);
           }
           if(typ[o] == 2 && allTytuly[o] == tytuly[q]){
             $('<li class="ed'+o+'"></li>').appendTo('body #eds'+currentTitleNumber);
             $('<div/>').text(tyt_art[o]).appendTo('body .ed'+o);
           }
           if(typ[o] == 3 && allTytuly[o] == tytuly[q]){
             $('<li class="ins'+o+'"></li>').appendTo('body #ins'+currentTitleNumber);
             $('<div/>').text(tyt_art[o]).appendTo('body .ins'+o);
           }
           
    }
    
     }
              
               }

基于标题和类型的 appendTo

appendTo based on title and type

arrays

sorting

ajax

jquery

jquery-ui