将Javascript转换为jQuery

嗨，这里是堆栈溢出

我刚开始学习jQuery，只是想把一些示例代码浓缩下来，我将如何进行下面的工作

在navweb的鼠标上方，选择类为.web的所有元素，然后将每个元素的背景更改为urlback/+i+.png，其中i是JS循环，然后淡入这些新背景

这是我目前拥有的JS，除了fadeIn之外，它还能工作

function showweb() {
for(var i=1; i < 45; i++){
var el = document.getElementById("im"+(i));
if(el && /web/.test( (el ||{}).className)){
  el.style.backgroundImage = "url(back/"+ i +"col.png)";}
}
}

function hideweb() {
for(var i=1; i < 45; i++){
    var el = document.getElementById("im"+(i));
    if(el && /web/.test( (el ||{}).className)){
      el.style.backgroundImage = "url(back/"+ i +".png)";}
    }
}

非常感谢所有的回复

编辑： 感谢所有的回复，事实证明Guffa是最理想的，最适合我使用；我还添加了fadeIn方法，但似乎没有在鼠标上方触发

$('#navweb').mouseover(function(){

  $(".web").each(function(){
    var i = parseInt(this.id.substr(2));
    $(this).css('background-image', 'url(back/' + i + 'col.png)').fadeIn(1000); 
  });

});

---

您在这里犯了一个小错误：“urlback/+i+.col.png”，它应该像我用单引号写的bellow一样

$('#navweb').mouseover(function(){
    var i = 1;
    $('.web').each(function(){
        $(this).css('background-image', 'url(back/' + i + '.col.png)'); 
        i += 1;
    });
});

---

您可以从元素的id获取编号：

$('#navweb').mouseover(function(){

  $(".web").each(function(){
    var i = parseInt(this.id.substr(2));
    $(this).css('background-image', 'url(back/' + i + '.col.png)'); 
  });

});

---

非常感谢，这是可行的，但它改变了背景的图像都混淆了我猜这是因为计数。图像没有编号为1、2、3、4；它们的随机值类似于1,4,6,7。猜猜我运气不好吧？如果数字是固定的，我总是可以将它们存储在一个数组中；如果你需要一个例子-可以提供一个。否则，我们可以提供更多关于图像如何编号的详细信息。是的，编号总是固定的，我该如何初始化jquery的数组？thanks@Ben，你能复制一下我现在的代码并试一试吗？我还有一个小错误。多亏了你们两位，Guffa发布的代码非常理想，因为它的内容也非常简洁。谢谢你回答我的问题，希望我能从中学习到完美的作品！谢谢我会复制这个鼠标，把图像改回“+i+”.png。这将使jquery和JS的长度几乎相同，那么使用它有什么好处吗？@ben:没有，在这种情况下没有什么好处。在其他情况下，它会使代码简单得多，或者处理特定于浏览器的差异。

$('#navweb').mouseover(function(){

  $(".web").each(function(){
    var i = parseInt(this.id.substr(2));
    $(this).css('background-image', 'url(back/' + i + '.col.png)'); 
  });

});