javascript - 如何从触发点击事件的地方获取元素父项的索引

Question

所以我在这支笔中有代码:http://codepen.io/Cristian_N/pen/PPbBde?editors=101

为了解释我在那里做了什么，我添加了一个按钮，当它被点击时会附加一个字段集。

在该字段集(包括原始字段集和附加字段集)中，还有一个按钮可将输入附加到字段集内的 div。

我想做的是:当我添加多个输入元素时，这些输入元素应该获得父字段集的索引号，同时增加操作号。我管理了操作编号部分的递增。有什么办法可以让它用 javascript/jquery 获取字段集索引号吗？

我的 html:

<div class="row">
    <div class="large-10 columns large-centered">
        <form id="client-details" class="" method="post" action="action-write.php">
            <div id="client-details-form">
                <label>First Name
                    <input type="text" name="clients[0][firstName]">
                </label>

                <label>Last Name
                    <input type="text" name="clients[0][lastName]">
                </label>

                <label>Date
                    <input type="text" name="clients[0][created]" value="20-sept-2015">
                </label>

                <fieldset class="eq-grup-0">
                    <legend>Equipment</legend>

                    <label>
                        <input type="text" name="clients[0][equipment][0][name]">
                    </label>

                    <div class="op-field">
                        <div class="row collapse">
                            <div class="small-2 columns">
                                <span class="prefix">Operatiune</span>
                            </div>
                            <div class="small-6 columns">
                                <input type="text" name="clients[0][equipment][0][operations][0][name]">
                            </div>
                            <div class="small-3 columns">
                                <span class=" postfix add-op" id="add-op">Adauga Operatiune</span>
                            </div>
                        </div>
                    </div>
                    <span class="button small" id="add-eq-group">Add Eq</span>
                </fieldset>
            </div>
            <input type="submit" class="button" value="Submit">
        </form>
    </div>
</div>

我的 jQuery:

var i = $('#client-details fieldset').size();

var k = $('.op-to-be-removed', $(this).parent('fieldset')).index();

$("#client-details-form").on("click", "#add-eq-group", function(){ 
    $("#client-details-form").append('<fieldset class="eq-to-be-removed eq-grup-' + i + '"><legend>Equipment</legend><label><input  type="text"name="clients[<?php echo $c; ?>][equipment][' + i + '][name]"></label><div class="op-field"><div class="row collapse"><div class="small-2 columns"><span class="prefix">Operatiune</span></div><div class="small-6 columns"><input type="text" name="clients[<?php echo $c; ?>][equipment][' + i + '][operations][0][name]"></div><div class="small-3 columns"><span class=" postfix add-op" id="add-op">Adauga Operatiune</span></div></div></div><span class="button small remove_eq">Remove Eq</span></fieldset>');
    i++; 
});

$("#client-details-form").on("click", ".remove_eq", function(){
    if( i > 0 ) {
        $(this).closest(".eq-to-be-removed").remove();
        i--;
    }
});

$("#client-details-form").on("click", "#add-op", function() {
    var j = $('.op-to-be-removed', $(this).closest('.op-field')).size() + 1;

    $(this).closest(".op-field").append('<div class="row collapse op-to-be-removed"><div class="small-2 columns"><span class="prefix">Operatiune</span></div><div class="small-6 columns"><input type="text" name="clients[<?php echo $c; ?>][equipment][' + k + '][operations][' + j + '][name]"></div><div class="small-3 columns"><span class="postfix remove_op">Sterge</span></div></div>');
    j++;
});

$("#client-details-form").on("click", ".remove_op", function(){
    if( j > 1 ) {
        $(this).closest(".op-to-be-removed").remove();
        j--;
    }
});

Answer 1

同时我设法解决了这个问题，并用解决方案更新了原来的笔 here .我用这个 var k = $($(this).closest('fieldset')).index(); 为 k