javascript - 父元素中子元素的 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));

但这失败了，因为它返回值 -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 网格行(将包含单击的元素)相对于主 十宽列 的索引。我添加了颜色以使其清晰。请看下面这个:

我不确定这里是否显示 javascript 的警报。如果没有，请查看此 fiddle :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>

希望这有帮助!!!