jQuery - making easy long code short (looping I guess)?

I have a code like this:

 $("#item-1").h开发者_如何学Pythonover(function(e) { 
        e.preventDefault();   
        $("#item-text").stop().animate({marginLeft: "0px"});
        $("#item-1-image").animate({opacity: 1});
    })  

 $("#item-1").mouseout(function() {
    $("#item-1-image").animate({opacity: 0});
 }) 

I have to repeat this for exactly 10 times changing all "item-1" to "item-2", "item-3" etc.

How to do that?

[edit]

What's the best/shortest way - because actually I know how to force it to work, but it's not an elegant way ;)

---

The hover event should handle the over and out events just fine. If you are stuck with these ids you can use a ^= to select ids that start with "item-".

$("div[id^='#item-']").hover(
    function(e) { 
        e.preventDefault();
        $(this).find("p").stop().animate({marginLeft: "0px"});
        $(this).find("img").animate({opacity: 1});
    }, 
    function() {
        $(this).find("img").animate({opacity: 0});
    }
);

You're must better off using one css class as these selectors would be much easier to work with.

---

You shouldn't be doing hover() and mouseout().

The .hover() method accepts 2 functions representing mouseenter and mouseleave.

Give the elements a common class, then extract the number from the ID

$(".someClass").hover(function(e) { 
      var num = this.id.split('-').pop();
      e.preventDefault();   
      $("#item-text").stop().animate({marginLeft: "0px"});
      $("#item-" + num + "-image").animate({opacity: 1});
 }, function() {
      var num = this.id.split('-').pop();
      $("#item-" + num + "-image").animate({opacity: 0});
 });

If you can't add a class for some reason, you can do a loop, but you need to use a javascript closure to retain the value of the index for the handlers.

for(var i = 1; i < 11; i++) {

    (function( num ) {
        $("item-" + i).hover(function(e) { 
              e.preventDefault();   
              $("#item-text").stop().animate({marginLeft: "0px"});
              $("#item-" + num + "-image").animate({opacity: 1});
         }, function() {
              $("#item-" + num + "-image").animate({opacity: 0});
         });
    })( i );

}

---

You can use a regular javascript for each loop.

for (var i = 1; i <= 10; i++) {
    $("#item-" + i).hover( ...
}

---

for (var i=1;i<=10;++i){
  $('#item-'+i).hover(...).mouseout(...);
}

---

for (var i=1;i<11;i++)
{
 $("#item-"+i).hover(function(e) { 
        e.preventDefault();   
        $("#item-text").stop().animate({marginLeft: "0px"});
        $("#item-"+i+"-image").animate({opacity: 1});
    })  

 $("#item-"+i).mouseout(function() {
    $("#item-"+i+"-image").animate({opacity: 0});
 }) 
}

---

$(".item").hover(function(e) {  
      e.preventDefault();   
    $("#item-text").stop().animate({marginLeft: "0px"});
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 1});
},function() {
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 0});
});

1. Use hover for both events
2. Use classes and a attribute, no ids with numbers