Transversing the DOM in jQuery
<p>I have a bunch of these little bits of HTML code repeated over and over again:</p>

<pre><code>&lt;div class="collapse" id="any_mins"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;&lt;img title="Click to expand" class="plus" alt="+" src="" /&gt;Heading&lt;/legend&gt;
        &lt;table class="mins_table"&gt;
          lots of rows and cells go here
        &lt;/table&gt;
    &lt;/fieldset&gt;
&lt;/div&gt;
</code></pre>

<p>Inside the tables there are form elements, mainly textboxes and selects. I have a bit of jQuery that makes the <code>&lt;legend&gt;</code> heading highlighted if there are non-blank form elements in the containing table. It looks like this:</p>

<pre><code>//       input                      td        tr     tbody    table     legend     img
$("input[type='text'][value!=0]").parent().parent().parent().parent().show();//the table
$("input[type='text'][value!=0]").parent().parent().parent().parent().siblings().children().attr("src", minus_path);//the image
$("input[type='text'][value!=0]").parent().parent().parent().parent().siblings().addClass("highlighted")//the legend

//       option                 select     td        tr     tbody    table     legend     img
$("option:selected[value!=0]").parent().parent().parent().parent().parent().show();//the table
$("option:selected[value!=0]").parent().parent().parent().parent().parent().siblings().children().attr("src", minus_path);//the image
$("option:selected[value!=0]").parent().parent().parent().parent().parent().siblings().addClass("highlighted")
</code></pre>

<p>This works, but is obviously the wrong way. Whats the right way?</p>
