jquery traversing up through parents to find previous element of main parent

Question

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

This is part of a much larger data set. What I am trying to do is when I find any of the inputs contained within this example have data being loaded thats not equivalent to its placeholder traverse up the stack of ul/li sets to the top li . Its fair to assume there are multiple main li as shown in this example. But in this case I am interested in the checkbox that has the class visual_astetics thats in the h2 element. So far I have everything I want working working when it comes to finding ones that are different and doing other things based on that. However, I can't seem to "find" the checkbox if you will progamatically.

I have tried using parents() , parentsUntil() , closest() and a couple others as well as a combination there of. But have yet to find the checkbox or the H2 its in. Another thing to assume is the HTML might not be editable as far as the current structure so adding a stop point if you will via id or class or other in that top li may not be possible at the moment. Its also good to assume that the layers can get much deeper than shown here. That all said, any ideas how one may still find that checkbox?

Answer 1

Perhaps you could combine the parents() function with the :has selector to find the parent that has a matching checkbox, and then find that checkbox. Something like

assume changedInput is a jquery object containing the input that isn't matching the placeholder anymore, eg #job_nw_throttle_start.

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

So it should walk up the tree until it finds an li that has a checkbox with that class somewhere within it, and then finds the checkbox inside that element.