子元素在父元素中的jQuery索引

Question

我在使用jquery索引功能时遇到麻烦。

我的div中有另一个div，我想弄清楚其父div中是其第一，第二还是第三div。

所以我有这样的事情：

<div class="column">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

现在，例如，当我单击最后一个孩子时，event.target将是带有类行的最后一个div。

现在我做：

$(event.target).parent().index($(event.target));

但这失败了，因为它的返回值me -1插入了2（如果从零开始索引）。

你有什么主意吗？ 谢谢。

编辑：

因此，我首先简化了结构，并认为我只需要了解概念，但是看起来您需要了解整个结构，所以这里是：

<div class="ten wide column schichtplan-body">
<div class="row">
    <div class="eight wide column"></div>
    <div class="eight wide column schicht-buttons">
        <!-- Radio buttons for schicht selection -->
        <div class="ui form">
            <div class="inline fields">
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="schichtMode" value="8hx3">
                        <label>8 Stunde schicht</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="schichtMode" value="12hx2">
                        <label>12 Stude schicht</label>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of radio form -->
    </div>
</div>
<div class="ui grid row">
    <div class="four wide column">
        <div class="date-field active">   {{day.date.sec|date('d.m.Y')}}</div>
    </div>
    <div class="twelve wide column">
        <div class="button-row">
            <div class="">F</div>
            <div class="">N</div>
            <div class="">frei</div>
        </div>
    </div>
</div>

我单击了按钮之一，但我想找出按钮所在的.ui.grid.row的索引。 所以我需要遍历几个父元素，然后找到相对于.ten.wide.column实际选择的.ui.grid.row

Answer 1

您需要使用以下jQuery ：

$(".column div").click(function () {
    alert( $(this).index() );
});

注意： 这将返回从零开始的索引

请参阅以下内容：

 $(".column div").click(function () { alert( $(this).index() ); }); 

 .row { background-color: orange; margin: 10px; height: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> 

编辑 ： 根据我对问题的编辑部分的理解，这是答案。 第二个警报将为您提供ui grid row （将包含clicked元素）相对于主要的ten wide column的索引。 我添加了颜色使其清晰可见。 请在下面查看：

我不确定javascript的警报是否确实显示在这里。 如果没有，请查看此小提琴 ： http : //jsfiddle.net/ynu0x0jw/

 $(".button-row > div").click(function () { $(this).addClass('red'); var currentElementIndex = $(this).index(); var parentIndex = $(this).closest(".ui.grid.row").index(); alert("Index of the selected element with respect to its parent (div with class of ui.grid.row) is " + currentElementIndex); $(this).removeClass('red'); $(this).closest(".ui.grid.row").addClass('red'); alert("Index of the selected element's parent (ui.grid.row) with respect to the main container (ui.grid.row) is " + parentIndex); $(this).closest(".ui.grid.row").removeClass('red'); }); 

 .button-row > div { background-color: orange; cursor: pointer; margin: 10px; height: 50px; text-align: center; transition: all 0.4s ease-in; } .ui.grid.row { background-color: white; transition: all 0.4s ease-in; } .button-row > div.red, .ui.grid.row.red { background-color: red; } 

 <div class="ten wide column schichtplan-body"> <div class="ui grid row"> <div class="four wide column"> <div class="date-field active">First ui.grid.row (Index : 0)</div> </div> <div class="twelve wide column"> <div class="button-row"> <div class="">A (Index : 0)</div> <div class="">B (Index : 1)</div> <div class="">C (Index : 2)</div> </div> </div> </div> <div class="ui grid row"> <div class="four wide column"> <div class="date-field active">Second ui.grid.row (Index : 1)</div> </div> <div class="twelve wide column"> <div class="button-row"> <div class="">D (Index : 0)</div> <div class="">E (Index : 1)</div> <div class="">F (Index : 2)</div> </div> </div> </div> <div class="ui grid row"> <div class="four wide column"> <div class="date-field active">Third ui.grid.row (Index : 2)</div> </div> <div class="twelve wide column"> <div class="button-row"> <div class="">G (Index : 0)</div> <div class="">H (Index : 1)</div> <div class="">I (Index : 2)</div> </div> </div> </div> <div class="ui grid row" id="III"> <div class="four wide column"> <div class="date-field active">Fourth ui.grid.row (Index : 3)</div> </div> <div class="twelve wide column"> <div class="button-row"> <div class="">J (Index : 0)</div> <div class="">K (Index : 1)</div> <div class="">L (Index : 2)</div> </div> </div> </div> </div> 

希望这可以帮助！！！

Answer 2

假设您要特定行的索引，则需要使用$(this).index()或$(event.target).index() 。 下面的示例使用.click ，但是只要this或event.target是div之一，它就可以工作。

 $('div.row').on('click', function(event) { $('#result').html($(event.target).index()); //or use $(this).index() }); 

 .row { height: 10px; background-color: lightblue; margin: 5px; } #result { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div>Index is: <span id="result"></span> </div>