web-dev-qa-db-ja.com

jQueryフロートされたliの行ごとのアイテム数を検索します

float：がleftに設定されているli内のアイテム（ulタグ）の数を見つける方法はありますか？ liタグで視覚的に表されるフォルダがたくさんあると仮定します。フローティング動作のため、liが単一の行に収まらない場合はすぐにプッシュダウンされ、行と列が表示されます。私の質問は

JQuery..etcの使用各行のliの数を決定する方法はありますか

コード

<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
 <li>F</li>
 <li>G</li>
 <li>H</li>
 <li>I</li>
 <li>J</li>
</ul>

スタイル

ul,li{margin:0 0;padding:0 0;}
ul li{display:inline;float:left}

私の解決策では、liのFまでは1つの行を作成し、残りは以下のように別の行を作成します。行1の要素数（私の場合は6）を取得するjqueryの方法が必要です。

A B C D E F
G H I J

環境

キーボードイベントを追加して、左、右、上、下を使用して各フォルダー（li）に移動します。左右は、次と前のliを強調表示するのと同じくらい簡単です。上と下のキーは、次の行と上の行に移動する必要があります。今、あなたはそれを得るでしょう:)

jquerycss-floathtml-listsloops
27
Deeptechtons

これを行うには、上部（y軸）の位置が前の兄弟の位置と一致するLIの数を確認します。

デモ： http://jsfiddle.net/KgBpx/1/

更新されたデモ：http://jsfiddle.net/KgBpx/2/

注：ロジックを完全に示すために、ウィンドウのサイズ変更でも再計算が行われます。

コード：

_function calculateLIsInRow() {
    var lisInRow = 0;
    $('ul li').each(function() {
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) return false;
            lisInRow++;
        }
        else {
            lisInRow++;   
        }
    });
    console.log('No: of lis in a row = ' + lisInRow);
}

calculateLIsInRow();

$(window).resize(calculateLIsInRow);
_

[〜＃〜]注[〜＃〜]

LIの総数がlisInRowの倍数でない場合は、最後の行を除いて、LIの数はすべての行で同じになります。最後の行のLIの数は、次のようにして簡単に見つけることができます。$('ul li').length % lisInRow

47
techfoobar

Filter（）を使用すると、コードの量が少なくなります。

function filterByTop(top) {
  return function(i) { return $(this).offset().top == top; };
}
var el = $('li:first');
var rowSz = $('li').filter(filterByTop(el.offset().top)).length;
2
stt

これを試してください（実際には、デバッグが必要な場合があります）

var numberPerRow = [];
var offsets =      [];
$("li").each(function(){
    var thisOffset = $(this).offset().top; 
    var index = $.inArray(thisOffset, offsets);
    if(index >=0){
        numberPerRow[index]++;
    }else{
        offsets.Push(thisOffset);
        numberPerRow.Push(1);
    }
});

更新

配列内で最大の行値を取得するには、次のようなものを使用できます。

console.log( Math.max.apply(null, numberPerRow) );
0
vvMINOvv
var rows = 0;
$('li').each(function() {
    var $this = $(this);
    var $prev = $this.prev();
    if ($prev.length && $this.position().top === $prev.position().top) rows++;
});

console.log(rows);
0
yckart

@techfoobarスクリプトの小さな更新：

アイテム数が一般的なアイテム数と異なる場合は、最後の行を非表示にできます

http://jsfiddle.net/cavico/KgBpx/222/

if(lisInLastRow != lisInRow) {
    $('ul li').slice( -lisInLastRow ).hide();
}
0
Camilo Vitorino

次の関数を使用して、各行あたりのLiアイテムの数を含む配列を取得できます。フロートが残っているliアイテムのみが必要な場合は、その条件を簡単に追加できます。

function computeItemsPerRow() {
        var itemsInRows = new Array();

        var countLi = $('ul li');
        var rowWidth = $('#rowContainer').width(); // TODO: Replace with the proper row container selector.
        var curRowWidth = 0;
        var itemsInCurRow = 0;

        for (var i = 0; i < countLi; i++) {
            var itemWidth = $('li:eq(' + i + ')').width();
            if (curRowWidth + itemWidth > rowWidth || i == countLi - 1) {

                itemsInRows[itemsInRows.length] = itemsInCurRow;
                itemsInCurRow = 1;
                curRowWidth = itemWidth;
            }
            else {
                itemsInCurRow++;
                curRowWidth = curRowWidth + itemWidth;
            }
        }

        return itemsInRows;

    }
0
Mohan Gundlapalli

あなたはトップの位置でそれを行うことができます：

var arr = [];

$('ul li').each(function(i){
    arr[i] = $(this).position().top;
});

次に、結果の配列で一致する値をカウントします--- Javascriptの配列で一致する値をカウントする方法

0
Jānis