jQuery selector wildcard-mapping unknown 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 a cms and I cannot do anything

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 on identifying 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 am not aware how can I achieved this kind of concept, or otherwise please present a best way how to simplify things.

Using this has to have a context.. Where are you calling this ?? — Sushanth --, Oct 10 '12 at 05:57
Also better to use $('select[id^="edit-attributes-"]').not('[id="edit-attributes-12"]') as it is faster than $('select[id^="edit-attributes-"][id!="edit-attributes-12"]') — Sushanth --, Oct 10 '12 at 06:00

score 2 · Accepted Answer · answered Oct 10 '12 at 05:57

2

this in your code doesn't refer to your selected elements, you can use after's 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/

answered Oct 10 '12 at 05:57

Ram

143,282
16
168
197

in jsfiddle there's no function(**ind**) but here you have it. – axscode Oct 10 '12 at 06:09
That's the `index` of selected elements in jQuery collection, _optional_. – Ram Oct 10 '12 at 06:12

score 0 · Answer 2 · answered Oct 10 '12 at 06:00

0

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>');  
 });

answered Oct 10 '12 at 06:00

Brian Noah

2,962
18
27

Thanks Brian, your code is more readable, so happened im looking for a shorter one, but i'm not pretty sure which one is the best, – axscode Oct 10 '12 at 06:20
I try to make my code as readable as possible, but I was just showing you the thought process that goes into it. Short is better from a performance standpoint. I just wanted to make sure you knew what was happening. – Brian Noah Oct 10 '12 at 16:20

jQuery selector wildcard-mapping unknown variable

2 Answers2