jquery - 使用 jQuery 检查元素在 DOM 中是高于还是低于

Question

我有以下感兴趣的 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') 是位于当前单击的投资组合项上方还是下方。

确定的问题是由于每两个portfolioItems 被“打包”到项目行div 中的事实而引入的。

如何检查 .selected 项目的上方/下方定位？

Answer 1

我建议：

$('.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 小提琴演示。

参考：

• index().

Answer 2

使用该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
    }
);​