Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Use a combination of <a href="http://api.jquery.com/nextAll/" rel="nofollow"><code>nextAll()</code></a> and <a href="http://api.jquery.com/first-selector/" rel="nofollow"><code>:first</code></a></p> <p>e.g.:</p> <pre><code>$("div.help").click(function() { var nextDiv = $(this).nextAll("div.help:first") }); </code></pre> <p><a href="http://api.jquery.com/next/" rel="nofollow"><code>next()</code></a> will only search the immediate sibling.</p> <pre><code>&lt;div&gt;&lt;/div&gt; &lt;-- if you are here &lt;div&gt;&lt;/div&gt; &lt;-- .next() will check this &lt;div&gt;&lt;/div&gt; &lt;-- but nothing further on </code></pre> <p>You can of course, use a combination of <code>next()</code> and a loop, e.g.</p> <pre><code>// pseudo-code while element is not div.help, element = element.next() </code></pre> <p><strong>EDIT</strong></p> <p><code>next()</code> and <code>nextAll()</code> will only search siblings -- ie elements on the same level. For example:</p> <pre><code>&lt;div&gt; &lt;-- calling nextAll() from here will search: &lt;div&gt;&lt;/div&gt; x not this &lt;/div&gt; &lt;div&gt; &lt;-- this &lt;div&gt;&lt;/div&gt; x not this &lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;-- this </code></pre> <p>So to get it to work with a multi-level layout, you need to first use some combination of <a href="http://api.jquery.com/parent/" rel="nofollow"><code>parent()</code></a> and <a href="http://api.jquery.com/parents/" rel="nofollow"><code>parents()</code></a>, which allow you to navigate one or more levels 'upwards'.</p> <p><code>parent()</code> will traverse one level up:</p> <pre><code>&lt;div&gt; &lt;-- this is the parent() &lt;div&gt;&lt;/div&gt; &lt;-- of this element &lt;/div&gt; </code></pre> <p>So in your particular example, starting from the button, you want to traverse one level up so you are on the same level as the other <code>&lt;div class='help'&gt;</code>, then use <code>nextAll()</code> to find the next div.</p> <pre><code>&lt;div class="help"&gt; // $(this).parent() &lt;div&gt;....OTHER HTML CONTENT......&lt;div&gt; &lt;input type='submit' class='ok'&gt; // $(this) is your starting point &lt;/div&gt; &lt;div&gt;....OTHER HTML CONTENT......&lt;div&gt; &lt;div class="help"&gt;&lt;/div&gt; // $(this).parent().nextAll("div.help:first") </code></pre> <p>Assuming of course, you are handling the click event of the input:</p> <pre><code>$("input.ok").click(function() { $(this); // in this scope the $(this) refers to the submit button }) </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload