如何制作特定的DIV第一个孩子以及任何东西，然后再追加到最后 [英] How to make a certain DIV first child and anything before it append to the end

问题描述

小提琴： https://jsfiddle.net/xkdm52gs/3/

jquery：

  $（function（）{
 var vhtml = ; 
 var u5 = new Array（）; 
 var $ divs = $（。cHold）; 
 var alphabeticallyOrderedDivs = $ divs.sort（function（a，b）{
返回$（a）.find（span）.text（）> $（b）.find（span）.text（）; 
}）; 
 $（ .dCon）。html（alphabeticallyOrderedDivs）; 
 $（＃arrow-left）。click（function（）{
 // alert（left）; 
 $（ .dCon div：first-child）。appendTo（。dCon）; 
 $（。dCon）。remove（。dCon div：first-child）; 
}） ; 
 $（＃arrow-right）。click（function（）{
 // alert（right）; 
 $（。dCon div：last-child） .prependTo（。dCon）; 
 $（。dCon）。remove（。dCon div：last-child）; 
}）; 
 
 $ （.cHold）。each（function（）{
 var k = $（this）.text（）。trim（）; 
 console.log（k.charAt（0））; 
 u5.push（k.charAt（0））; 
}）; 
 console.log（unique（u5）.length）; 
 u5 = unique（u5）.sort（）; 
 for（var k = 0; k  vhtml + =< a class ='aLink'href ='javascript：void（0）;'>  + u5 [k​​] +< / a>; 
} 
 $（。theLetNum）。html（vhtml）; 
}）; 
 
函数unique（list）{
 var result = []; 
 $ .each（list，function（i，e）{
 if（$ .inArray（e，result）== -1）result.push（e）; 
}）; 
返回结果; 
} 
  

左/右箭头工作正常，但我怎样才能修改脚本所以当单击一个字母时，表示该字母的DIV的第一个实例是第一个孩子，如果它不是第一个孩子，它应该追加到最后。

所以，例如在小提琴中：如果我点击 N ，带有文本 Nine 的div应该是第一个子元素和div（s）与文本 Eleven ，五， Four 应该追加到以各自的顺序结束等等。

解决方案

1. 查看jQuery prepend。


2. 我认为你最好使用滚动（overflow-x：scroll）作为你的选择器，这将消除重新排序你的dom的必要。


3. flexbox也是更好的动态重新排序解决方案

Fiddle: https://jsfiddle.net/xkdm52gs/3/

Jquery:

$(function() {
var vhtml = "";
var u5 = new Array();
var $divs = $(".cHold");
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("span").text() > $(b).find("span").text();
        });
$(".dCon").html(alphabeticallyOrderedDivs);
    $("#arrow-left").click(function() {
    //alert("left");
    $(".dCon div:first-child").appendTo(".dCon");
    $(".dCon").remove(".dCon div:first-child");
  });
  $("#arrow-right").click(function() {
    //alert("right");
    $(".dCon div:last-child").prependTo(".dCon");
    $(".dCon").remove(".dCon div:last-child");
  });

  $(".cHold").each(function() {
    var k = $(this).text().trim();
    console.log(k.charAt(0));
    u5.push(k.charAt(0));
  });
  console.log(unique(u5).length);
  u5 = unique(u5).sort();
  for (var k = 0; k < u5.length; k++) {
    vhtml += "<a class='aLink' href='javascript:void(0);'>" + u5[k] + "</a>";
  }
  $(".theLetNum").html(vhtml);
});

function unique(list) {
    var result = [];
    $.each(list, function(i, e) {
        if ($.inArray(e, result) == -1) result.push(e);
    });
    return result;
}

The left/right arrow is working fine but how can I also modify the script so when a letter is clicked the first instance of the DIV which represents the letter is the first child and if it wasn't the first child anything before it should append to the end.

So e.g. in the fiddle: If I click N, div with the text Nine should be the first child and div(s) with the text Eleven, Five, Four should append to the end in their respective order and so forth.

解决方案

1. have a look at jQuery prepend.
2. i think you would be better off using scrolling (overflow-x: scroll) for your selector, that will eliminate the need to reorder your dom.
3. flexbox is also a better solution for dynamic reordering

这篇关于如何制作特定的DIV第一个孩子以及任何东西，然后再追加到最后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！