Jquery.next () missing form element entered

Question

I am somewhat confused by the behavior of the .next ('selector') method when applied to html:

<form> <label for="relayhosts" class="fixedwidth">Relay Host(s)</label> <input style="display: none;" name="relayhosts" value="" type="text"> <input class="ip_octet" id="octet_1" type="text"> <label class="ip_octet_label">.</label> <input class="ip_octet" id="octet_2" type="text"> <label class="ip_octet_label">.</label> <input class="ip_octet" id="_octet_3" type="text"> <label class="ip_octet_label">.</label> <input class="ip_octet" id="octet_4" type="text"> </form> 

Using $('#octet_1').next('input'); does not return another $('#octet_1').next().next(); returns the next input as expected.

I also tried $('#octet_1').next('input.ip_octet'); and $('#octet_1').next('.ip_octet'); , both of which return nothing.

Input elements and labels were dynamically generated, but as the next. () Method . the following () sees that this will not be a problem with objects existing in the DOM.

Answer 1

next() returns the next element only if it matches the selector.

nextAll() , searches for all the following elements and returns those that match the selector.

So you probably want to:

 nextAll('input:first'); 

(see selector :first )

... or

 nextAll('input').first(); 

... depending on personal preference.

Answer 2

Jquery Next Method Get immediately the next sibling of each element in the set of matched elements. If a selector is provided, he receives the next brother only if he matches this selector.

 $('#octet_1').nextAll('input')