jquery遍历父母,找到主要父母的前一个元素

时间:2013-04-03 16:01:51

标签: javascript jquery dom

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>

这是更大的数据集的一部分。我想要做的是当我发现此示例中包含的任何输入时,数据被加载的数据不等于其占位符遍历ul/li的堆栈设置到顶部li。可以假设有多个主li,如本例所示。但在这种情况下,我对visual_astetics元素中具有类h2的复选框感兴趣。到目前为止,我找到了一些我想要工作的东西,当找到不同的东西并根据它做其他事情时。但是,如果你是progamatically,我似乎无法“找到”复选框。

我尝试过使用parents()parentsUntil()closest()和其他几个以及其中的组合。但还没有找到复选框或其中的H2。另外要假设的是HTML可能无法编辑到目前的结构,因此如果您将通过id或类或其他顶部{{1}添加停止点此刻可能无法实现。假设层可以比这里显示的更深,也很好。这一切都说,任何想法如何仍然可以找到该复选框?

1 个答案:

答案 0 :(得分:1)

也许您可以将parents()函数与:has选择器结合使用,以找到具有匹配复选框的父级,然后找到该复选框。像

这样的东西

假设changedInput是一个jquery对象,其中包含的输入不再与占位符匹配,例如#job_nw_throttle_start。

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

所以它应该向上走,直到它找到一个li,其中有一个带有该类的复选框,然后找到该元素内的复选框。