CODEWITHSUNDEEP
jquery
edified
edified

Reputation: 23

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>

Upvotes: 0

Views: 65

Answers (1)

Jim
Jim

Reputation: 3579

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/

Upvotes: 1

Related Questions