0 
  $(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 个元素，我会获取其他元素并放入另一个元素。在应该解析中具有放大功能的浮动，但我不能这样做，因为我需要维护垂直顺序。

我创造了“超过 9 种元素”，让它们保持更平衡——一种风格。

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

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

4

2 回答 2

1

我不确定平衡，但您可以使用.slice() [docs]使用拆分选定元素：

$('#left').append($elements.slice(0,7));
$('#right').append($elements.slice(7));
于 2012-07-31T20:19:46.080 回答
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)那里的原因。我想没有必要解释他们做了什么。

于 2012-07-31T20:28:44.407 回答