JQuery selector wildcard-mapping unkown variable

Question

HTML

<select id="edit-attributes-1"></select> <select id="edit-attributes-2"></select> <select id="edit-attributes-3"></select> <select id="edit-attributes-4"></select> 

This is generated by cms and I can do nothing

Jquery:

  $('select[id^="edit-attributes-"][id!="edit-attributes-12"]').after('<span class="step stepdown step-'+$(this).attr('id')+'">+</span>'); 

so I created this since trying jquery.ui.spinner is problematic for identifying the elements.

Note:

 $(this).attr('id') here results as unknown. 

results

 <select id="edit-attributes-1"></select> <span class="step stepdown step-**unknown**">+</span> <select id="edit-attributes-2"></select> <span class="step stepdown step-**unknown**">+</span> <select id="edit-attributes-3"></select> <span class="step stepdown step-**unknown**">+</span> <select id="edit-attributes-4"></select> <span class="step stepdown step-**unknown**">+</span> 

As you can see, the part of $ (this) .attr ('id') is unknown.

Desired Results

 <select id="edit-attributes-1"></select> <span class="step stepdown step-**edit-attributes-1**">+</span> <select id="edit-attributes-2"></select> <span class="step stepdown step-**edit-attributes-2**">+</span> <select id="edit-attributes-3"></select> <span class="step stepdown step-**edit-attributes-3**">+</span> <select id="edit-attributes-4"></select> <span class="step stepdown step-**edit-attributes-4**">+</span> 

I do not know how I can achieve these kinds of concepts, or otherwise suggest a better way to simplify. Can anyone show me the way of the Jedi.

Answer 1

this in your code does not apply to your selected elements, you can use the after function:

 $('select[id^="edit-attributes-"][id!="edit-attributes-12"]').after(function(ind){ return '<span class="step stepdown step-'+ this.id +'">+</span>' }); 

http://jsfiddle.net/qjVHM/

Answer 2

Try this code:

  $('select[id^="edit-attributes-"][id!="edit-attributes-12"]').each(function () { var this_selection = $(this); var selection_id = this_selection.attr('id'); this_selection.after('<span class="step stepdown step-' + selection_id + '"></span>'); });