Javascript jquery向上遍历父级以查找主父级的上一个元素

HTML：

<li>
    <h2 class="tree_header"><input type="checkbox" name="no_name" class="visual_astetics" data-headcheck="yes"> Network Throttle</h2>
    <ul class="tree_collapse">
        <li>
            <ul>
                <li>Throttle Network speeds to <input type="text" name="job_nw_throttle_rate" id="job_nw_throttle_rate" style="width:50px;" placeholder="no limit" data-multiple="yes" data-autosave="postHandler" data-autosave_end="" data-autosave_uri="/api/jobs/setproperty"><span class="small_text italic">(kbits/s)</span></li>
                <li>
                    <h2 class="tree_header">Set Start &amp; Stop times for Network Throttle</h2>
                    <ul class="tree_collapse">
                        <li>
                            <ul>
                                <li>
                                    Throttle starts at <input type="text" name="job_nw_throttle_start" id="job_nw_throttle_start" style="width:30px;" placeholder="0" data-multiple="yes" data-autosave="postHandler" data-autosave_end="" data-autosave_uri="/api/jobs/setproperty"> (local time / 24-Hour format)
                                </li>
                                <li>
                                    Throttle finishes at <input type="text" name="job_nw_throttle_end" id="job_nw_throttle_end" style="width:30px;" placeholder="0" data-multiple="yes" data-autosave="postHandler" data-autosave_end="" data-autosave_uri="/api/jobs/setproperty"> (local time / 24-Hour format)
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

网络节流阀



将网络速度限制为（kbits/s）

设置启动和关闭；网络节流阀的停止时间




油门在（当地时间/24小时格式）启动


节气门在（当地时间/24小时格式）结束

这是一个更大的数据集的一部分。我试图做的是，当我发现本例中包含的任何输入加载了与其占位符不同的数据时，将

ul/li

集合的堆栈向上遍历到顶部

li

。可以公平地假设有多个主

li

，如本例所示。但在本例中，我感兴趣的是在

h2

元素中有类

visual\u stics

的复选框。到目前为止，我已经拥有了我想要的一切，在寻找不同的方面，并以此为基础做其他事情。然而，如果你愿意进行编程，我似乎无法“找到”复选框

---

我试过使用

parents（）

、

parentsUntil（）

、

closest（）

和其他一些以及它们的组合。但尚未在其中找到复选框或H2。另一个需要假设的是，HTML可能无法编辑到当前结构，因此，如果您愿意，则通过id或类或其他方式在顶部

li

添加停止点目前可能不可能。假设这些层可以比这里显示的更深也很好。总而言之，你知道怎么还能找到那个复选框吗？

也许你可以将

parents（）

函数与

：has

选择器结合起来，找到具有匹配复选框的父项，然后找到那个复选框。差不多

假设

changedInput

是一个jquery对象，其中包含与占位符不再匹配的输入，例如#作业_nw _节流_启动

var visualAstheticsCheckbox = changedInput.parents('li:has(input.visual_asthetics)').find('input.visual_asthetics');

---

因此，它应该沿着树向上走，直到它找到一个

li

，其中某个地方有一个带有该类的复选框，然后在该元素中找到该复选框。

在所有情况下，它都将是一个具有H2的li，该H2本身有该复选框。但是我很喜欢这样做，所以如果你想根据

li

->

h2

->

input

结构进行查找，你可以做

changedInput.parents（'li:has（h2-input:checkbox）'）。find（'h2-input:checkbox'）

。