javascript - 如果有超过 x 个元素，则将其分开并将超出的内容附加到另一个 div 中

Question

  $(document).ready(function(){
  var unique_price = $(".price_value").get()
    var number_price = unique_price.length;
    if (number_price >=7 ){
        $(".price_list").each(function(index) {
        $(".price_value_left").append($(".price_value:eq(0)"),$(".price_value:eq(1)"),$(".price_value:eq(2)"),$(".price_value:eq(3)"),$(".price_value:eq(4)"));
        $(".price_value_right").append($(".price_value:eq(5)"),$(".price_value:eq(6)"),$(".price_value:eq(7)"),$(".price_value:eq(8)"),$(".price_value:eq(9)")); 
        });                     
    } else if (number_price >9){
        $(".price_list").each(function(index) {
        $(".price_value_left").append($(".price_value:eq(0)"),$(".price_value:eq(1)"),$(".price_value:eq(2)"),$(".price_value:eq(3)"),$(".price_value:eq(4)"),$(".price_value:eq(5)"),$(".price_value:eq(6)"));
        $(".price_value_right").append($(".price_value:eq(7)"),$(".price_value:eq(8)"),$(".price_value:eq(9)"),$(".price_value:eq(10)"),$(".price_value:eq(11)"),$(".price_value:eq(12)")); 
        });     
    }
    else {

            $(".price_value_left").append($(".price_value:eq(0)"),$(".price_value:eq(1)"),$(".price_value:eq(2)"),$(".price_value:eq(3)"),$(".price_value:eq(4)"),$(".price_value:eq(5)"),$(".price_value:eq(6)"));
    }

});

我有一些菜单，其中有一些项目(“li”)。我做了这个代码。如果 div 中有等于或超过 7 个元素，我会获取其他元素并放入另一个元素。在应该解析中具有放大功能的 float ，但我无法执行此操作，因为我需要维护垂直顺序。

我创建了“超过 9 个元素”，以便它们保持更加平衡 - 一种风格。

但我认为这段代码非常丑陋，并且不能动态地接受。

有没有更好的方法来解决这个问题并保持平衡设计？

Answer 1

jQuery(function($){
    var unique_price = $('.price_value');
    if( unique_price.length > 6 ) {
        var half = ceil(unique_price.length / 2); // In case we have an odd number, we want more elements in the left "column", so we round to next higher number.
        $('.price_list .price_value_left').append($('.price_value:lt(' + (half + 1) + ')');
        $('.price_list .price_value_right').append($('.price_value:gt(' + half + ')');
    }
    else {
        $('.price_list .price_value_left').append(unique_price);
    }
});

您基本上想要的是大于 (:gt()) 和低于 (:lt()) 选择器。不幸的是，没有 :lte 选择器，这就是我将 (half + 1) 放在那里的原因。我想没有必要解释他们是做什么的。