jQuery : 如何操作索引

jQuery : how to manipulate indexes?

本文关键字：操作 索引 何操作 jQuery      更新时间：2023-09-26

不应该是一个很难的问题...我只是很难弄清楚如何对一些jquery元素进行操作，尤其是它们的索引。Teh codez：

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

我想使我加载的图片的名称取决于可选择的jQuery的索引。所以我抓住索引并尝试添加 1...但它不起作用，因为"+"也是一个连接器。
我也尝试解析 Int，但它总是值 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)"));

像这样使用它

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

$.css有一个替代语法，如

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

你可以利用它。

更新

this在selectable回调中，在您的情况下是指#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)");
                }});

演示

$( "#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)")});
相关文章：