Question

Should not be such a hard question… I’m just having a hard time figuring out how to make operations on some jquery elements, particularly their indexes. Teh codez:

$( "#docSlider" ).css("background-image", "url(../../bundles/mypath/images/maquette/img" + $( "#selectable li" ).index( this ) + (".jpg)"));

I want to make the name of the picture I load depend on the index of a jQuery selectable. So I grab the index and try to add 1… but it can’t work because “+” is also a concatenator.
I’ve tried to parseInt as well, but it was always worth 0.

How do I simply transform the index to an integer and then concatenate it with the rest of the string?

Thank you in advance!

Edit : I’m using a function that already exists, so I can hardly change the parameters (well, I guess I can’t…)

I have this sample of code in my $(function() {}) section :

$( "#selectable" ).selectable({
                selected: function(event, ui) { 
                    $( "#docSlider" ).css("background-image", $( "#selectable li" ).index( this ) "url(../../bundles/mypath/images/maquette/img" +  + (".jpg)"));
                }});

//initalizing
                $( "#docSlider" ).css("background-image",  "url(../../bundles/auraeconference/images/maquette/img" + $( "#selectable li" ).index( this ) + (".jpg)"));

Answer 1

Use it like

$( "#docSlider" ).css("background-image",function(i){
          return "url(../../bundles/mypath/images/maquette/img"+ (i+1)+".jpg";
}); 

$.css has an alternate syntax like

 .css( propertyName, function(index, value) )

You can make use of that.

UPDATE

this inside the selectable callback, in your case refers to #selectable . So you can either use

$(this).find('li').index(ui.selected);

or

$( "#selectable li" ).index( ui.selected )

so you can try this

selected: function(event, ui) { 
      var index = $( "#selectable li" ).index( ui.selected ) + 1;
     $( "#docSlider" )
          .css("background-image",  "url(../../bundles/mypath/images/maquette/img" + index + ".jpg)");
                }});

Demo