JQuery selection. Find an item after another

Question

<li> <select id="foo"></select> </li> <li> <select id="bar"></select> </li> <li> <select id="baz"></select> </li> var select_after = function(src){ //How get all select elements after the one specified as argument ? } 

How to write this method?

 select_after($("#foo")) 

should return #bar and #bas elements in an array

 select_after($("#bar")) 

should return the #baz element in the array

 select_after($("#baz")) 

should return an empty array

How do I write this method?

Answer 1

For a simple single line line, you can use the following chain:

 $("#foo").parent().nextAll().children("select"); 

In the above code, first select the parent element, which is the li element, then select all the siblings that appear after it, and finally return the select elements inside. As seen in this fiddle .

However, this method is cumbersome and slow, as you go along the DOM. Another method that I prefer to use, because it works faster when working with a large set of elements,

Pre-select all select elements, and then create an object with links to the identifier to the index by cyclizing them. Now you can simply connect the jQuery object to get the elements that appear after (or earlier).

 // Preselect select elements var selects = $("ul > li > select"), // Prepare empty object to hold index reference idx = {}; // Loop through the select elements and build index reference selects.each(function(i){idx[this.id] = i;}); // Get select elements after #foo console.log(selects.slice(idx.foo+1)); // Get select elements before #baz console.log(selects.slice(0, idx.baz)); 

Check the above method for this script .