jquery - 选定的索引问题

Question

请找到以下代码

HTML

<div data-role="page" id="pge">
    <div data-role="content">

        <fieldset class="filedSetRow">
            <div class="disPly">
                display 1
            </div>    
        </fieldset>

        <fieldset class="filedSetRow">
            <div class="disPly">
                display 2
            </div>
        </fieldset>

    </div>
</div>

JS

$(document).on('pageinit','#pge',function (event, ui){
   alert($('.disPly').length);
});

$(document).on('vmouseup','.disPly',function (event, ui){
    alert($(this).index());
});

实际上问题是当我点击“.disPly”时，相应的索引没有被执行。这种情况有什么问题！总是只有“0”。

预期结果是“.disPly”的点击索引。

提前致谢...

Answer 1

问题是这index()将为您提供具有相同父级的兄弟姐妹列表中的索引。在这种情况下，每个字段集中只有 1 个子 div。

您可以改用以下内容：

alert($("#pge .disPly").index(this));

这是一个工作示例（注意：我将其更改为使用click事件）

Answer 2

jQueryindex()根据其兄弟元素返回元素的索引。在您的示例中，您的类 disPly div 在其父级中是单独的，因此您将始终收到 0 作为索引。

如果您想知道其父级的索引，这在查看您的代码时似乎更合适，请执行以下操作：

$(document).on('vmouseup','.disPly',function (event, ui){
    //Get a list of elements we want to compare, and get index of event target.
    alert($(this).parent().siblings().index($(this).parent()));
});