javascript - jQuery 导航 - 更改输入的父-父-父-父-兄弟的输入

Question

我目前正在寻找一些关于 jQuery 的建议，因为我认为我做错了，即使我得到了我想要的结果。

我想在更改时将输入的值更改为最接近的具有 .milestone 类的输入的值。我想要更改的输入是保持输入，我希望它与更改时修改后的输入相等。下面是 HTML，不幸的是我无法更改，因为这是一个产品。

<div class="container area  dform_section_area6">
    <div class="box  box13 two">
        <div class="dform_section_box13">
            <div style="clear: both;" data-type="html" data-name="business_case_approved_pmr" id="dform_widget_html_business_case_approved_pmr" data-active="true" class="dform_widget  dform_widget_type_html dform_widget_business_case_approved_pmr">
                <p>Business Case Approved</p>

            </div>
        </div>
    </div>
    <div class="box  box14 two">
        <div class="dform_section_box14">
            <div data-type="date" data-name="bc_approved_planned_pmr" data-active="true" data-agentonly="false" class="container dform_widget  dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_pmr dform_widget_bc_approved_planned_bc">
                <div>
                    <label for="dform_widget_bc_approved_planned_pmr">Planned</label>
                </div>
                <div>
                    <input id="dform_widget_bc_approved_planned_pmr" type="date" name="bc_approved_planned_pmr" data-mapfrom="bc_approved_planned_bc" class="dform_field_active">
                </div>
            </div>
        </div>
    </div>
    <div class="box  box15 two">
        <div class="dform_section_box15">
            <div data-type="select" data-name="bcapproval_on_target" data-active="true" data-agentonly="false" class="container dform_widget  dform_widget_field dform_widget_type_select dform_widget_bcapproval_on_target dform_widget_">
                <div>
                    <label for="dform_widget_bcapproval_on_target">On target?</label>
                </div>
                <div>
                    <select id="dform_widget_bcapproval_on_target" name="bcapproval_on_target" class="dform_field_active">
                        <option></option>
                        <option value="Yes" data-off="bc_approved_revised_pmr">Yes</option>
                        <option value="No" data-on="bc_approved_revised_pmr">No</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="box  box16 two">
        <div class="dform_section_box16">
            <div data-type="date" data-name="bc_approved_revised_pmr" data-active="false" data-agentonly="false" class="container dform_widget milestone mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_revised_pmr dform_widget_">
                <div>
                    <label for="dform_widget_bc_approved_revised_pmr">*Revised</label>
                </div>
                <div>
                    <input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">
                </div>
            </div>
        </div>
    </div>
    <div class="box  box17 two">
        <div class="dform_section_box17">
            <div data-type="date" data-name="gate_3_actual1" data-active="true" data-agentonly="false" class="container dform_widget  dform_widget_field dform_widget_type_date dform_widget_gate_3_actual1 dform_widget_">
                <div>
                    <label for="dform_widget_gate_3_actual1">Actual</label>
                </div>
                <div>
                    <input id="dform_widget_gate_3_actual1" type="date" name="gate_3_actual1" class="dform_field_active">
                </div>
            </div>
        </div>
    </div>
    <div class="box  box18 last two">
        <div class="dform_section_box18">
            <div data-type="date" data-name="bc_approved_planned_bc" data-active="true" data-agentonly="false" class="container dform_widget param mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_bc dform_widget_">
                <div>
                    <label for="dform_widget_bc_approved_planned_bc">holding</label>
                </div>
                <div>
                    <input id="dform_widget_bc_approved_planned_bc" type="date" name="bc_approved_planned_bc" class="dform_field_active">
                </div>
            </div>
        </div>
    </div>
</div>

我正在使用下面的 jQuery 来查找我想要更新的输入的值，但我忍不住认为必须有一种不太冗长的方法来改变它。我不能只引用输入的 ID，因为我需要对 20 多个字段执行此操作。

$(this).parent().parent().parent().parent().next().next().find('.param').find('input').val()

这=

<input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">

Answer 1

您可以使用closest()方法来代替并查找递归parent()元素，然后查找 sibling 的子级元素。

$(this).closest(".dform_section_area6").find('.param:last input').val()