0

私は次の興味深いDOM構造を持っています：

<div id="portfolioItems">

    <div class="portfolioItemsLine">
        <div class="portfolioItem selected">1</div>
        <div class="portfolioItem">2</div>
    </div>
    <div class="portfolioItemsLine">
        <div class="portfolioItem">3</div>
        <div class="portfolioItem">4</div>
    </div>

</div>

各.porfolioItemには、クリックハンドラーがアタッチされています。クリックハンドラー関数内から、$（'。portfolioItem.selected'）が現在クリックされているportfolioItemの上にあるのか、それとも下にあるのかを判断する必要があります。

決定の問題は、2つのportfolioItemがそれぞれアイテムラインdivに「パック」されているという事実によって発生します。

選択したアイテムに関して上/下の位置を確認するにはどうすればよいですか？

4

2 に答える 2

4

私は提案します：

$('.portfolioItem').click(
    function(){
        var selectedAt = $('.portfolioItem.selected').index('.portfolioItem'),
            curIndex = $(this).index('.portfolioItem');
        if (curIndex > selectedAt){
            // the clicked item is 'later' than the .selected item in the DOM
            console.log('"later"');
        }
        else if (curIndex < selectedAt){
            // the clicked item is 'earlier' than the .selected item in the DOM
            console.log('"earlier"');
        }
        else if (curIndex == selectedAt){
            // the clicked item is the .selected item
            console.log('"equal"');
        }
    });​

JSフィドルデモ。

参照：

于 2012-06-19T23:01:22.073 に答える
1

この関数を使用するindex()と、コレクション内の要素が検索されます。適切に選択された場合、コレクションの要素は「フラット」リストになります（「div / line」クラスについて心配する必要はありません）:)

$(".portfolioItem").click(
    function()
    {
        var items = $("#portfolioItems .portfolioItem");
        var selected = $("#portfolioItems .selected");
        var i = $(items).index(selected);
        var j = $(items).index(this);
        console.log(i,j);
        // compare i and j to understand if above or below
    }
);​
于 2012-06-19T23:09:57.917 に答える