Question

Suppose I have a hypothetical html layout such as this (while hypothetical, I’m implementing something similar, but have streamlined it for the sake of the question):

<div id='start' class='checkpoint'>
  <ul>
    <li><input name='need_this'/></li>
    <li><input name='need_also'/></li>
    <li>
      <div id='stop' class='checkpoint'>
        <ul>
          <li><input name='ignore_this' /></li>
        </ul>
      </div>
    <li>
      <div>
         <div><input name='need_again' /></div>
      </div>
    </li>
  </ul>
  <input name='need_aswell' />
</div>

What I would like to do, beginning with $(‘#start’), is to obtain all elements with the ‘name’ attribute, unless they exist inside a new checkpoint class. While I am familiar with .find() and .nextUntil(), my understanding is that as these read through the html progressively, and would stop stop as soon as they hit the ‘checkpoint’ class midway through? I would like to search around and beyond any ‘.checkpoint’ element,s until the close of the #start div.

Would be grateful if someone could point me towards the right approach for this? (it’s possibly some jQuery condition I’m unfamiliar with)

Answer 1

This should do it:

$('#start [name]').not('#start .checkpoint [name]')

though I don’t know how efficient this is…

---

Side note: input elements should be inside <form>s.