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 
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 に答える
1

バランスについてはわかりませんが、.slice() [docs]を使用して選択した要素を分割することができます:

$('#left').append($elements.slice(0,7));
$('#right').append($elements.slice(7));
于 2012-07-31T20:19:46.080 に答える