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'）是位于当前单击的portfolioItem之上还是位于其下方。

确定中的问题是由于每两个portfolioItem都“打包”到项目行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 Fiddle demo

参考文献：

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
    }
);

使用jQuery检查DOM中的元素是在上面还是下面

2 个答案: