edified edified - 4 months ago 12
jQuery Question

jQuery closest not traversing past parent

I'm after an input that's inside 3

divs
, a
td
, and a
tr
. There are no usable unique attributes to search with (id's and rows change frequently). I'm trying to traverse the DOM by starting with a
label
in a
div
in an adjacent
td
, go to the
next td
, then down through a
div
a
div
another
div
then into the
input
.

I started with
$('[title*="P2P"]').closest('td').next('.control-cell').find('input');


It doesn't select the input for me, so I started working backwards by printing the class of the selected element 1 step at a time, but it breaks as soon as use
closest
to go past the first
div
.

My jsfiddle: https://jsfiddle.net/28kacj28/

And my HTML:

<tr class="control">
<td class="label-cell left-label">
<div class="workitemlabel">
<label class="workitemcontrol-label" for="witc_135_txt" title="[Field Name: Process Start Date]">Start Date:</label>
</div>
</td>
<td class="control-cell">
<div class="workitemcontrol">
<div id="witc_135" class="combo input-text-box date-time drop">
<div class="wrap">
<input type="text" id="witc_135_txt" autocomplete="off" maxlength="255" title="7/7/2016 12:00:00 AM" aria-invalid="false">
</div>
<div class="drop bowtie-calendar bowtie-icon"></div>
</div>
</div>
</td>
</tr>
<tr class="control">
<td class="label-cell left-label">
<div class="workitemlabel">
<label class="workitemcontrol-label" for="witc_136_txt" title="[Field Name: P2P]">P2P:</label>
</div>
</td>
<td class="control-cell">
<div class="workitemcontrol">
<div id="witc_136" class="combo input-text-box date-time drop">
<div class="wrap">
<input type="text" id="witc_136_txt" autocomplete="off" maxlength="255" title="7/29/2016 12:00:00 AM" aria-invalid="false">
</div>
<div class="drop bowtie-calendar bowtie-icon"></div>
</div>
</div>
</td>
</tr>
<span></span>

Jim Jim
Answer

I'm not exactly sure what you are trying to select but you made two mistakes:

  1. Wrap table elements ( <tr>, <td> ) with a table. Browsers will remove tr and td tags automatically and dynamically (meaning "View Source..." will still show the tags even though they were removed) when they are not properly wrapped by a table tag. This means the tr.control tag was not being found.
  2. Your class variable testClass was being assigned from the undefined (misspelled) variable testShit instead of testStuff (line 2). Keep it classy.

I made corrections in this fiddle: https://jsfiddle.net/28kacj28/3/

Comments