jQuery : 인덱스를 조작하는 방법?

Question

어려운 질문이 아니어야합니다 ... 일부 jquery 요소, 특히 인덱스에서 작업을 수행하는 방법을 찾는 데 어려움을 겪고 있습니다. 코드 :

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

로드 할 그림의 이름을 jQuery 선택 가능 인덱스에 의존하게하고 싶습니다. 그래서 색인을 붙잡고 1을 더하려고합니다. 그러나 "+"또한 연결자이므로 작동하지 않습니다.
는 나뿐만 아니라으로 parseInt에 시도했다, 그러나 0

가 어떻게 단순히 정수로 인덱스를 변환 한 후 문자열의 나머지 부분을 연결하여 않는 항상 가치가 있었다?

미리 감사드립니다.

편집 : 이미 존재하는 기능을 사용하고, 그래서 나는 거의 내가 (내 $ 코드의 샘플을 가지고 (... 음, 내가 할 수없는 것 같아요)

을 매개 변수를 변경할 수 있습니다 기능() {}) 섹션 : 당신이 그 기능에 대해 걱정할 필요가 없습니다

$("#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

이

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

$.css처럼 사용하여 편집하는 등의 대체 구문이

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

그걸 활용할 수 있습니다. 귀하의 경우

업데이트 selectable 콜백 내부

this는 #selectable을 의미합니다. 그래서 당신은

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

또는

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

그래서 당신이 시도 할 수 있습니다 사용할 수 있습니다이

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

Answer 2

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

.css()이 또한 매개 변수로 재산 및 핸들러를 가지고,이 코드 또는 기존 기능에 영향을 미치지 않을 것입니다.

당신에 따르면

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

하거나

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