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（如果从零开始索引）。

你知道吗？谢谢。

编辑：

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

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

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

见下文：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑：根据我对问题编辑部分的理解，这里是答案。第二个警报将为您提供相对于主ui grid row的{{1}}（包含已点击的元素）的索引。我添加了着色以使其清晰。请参阅以下内容：

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

＆＃13;

ten wide column

＆＃13;

$(".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');
});

＆＃13;

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

＆＃13;

希望这有帮助!!!

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

父元素中子节点的jQuery索引

2 个答案: