I'm trying to dynamically change the background of my page using the jquery waypoint plugin (which tells you when an element is at the top or bottom of the viewport). My HTML is simple - I have multiple headings with the id of `#part1',`#part2' and so on and so forth. When `part[x]` is at the top of the viewport, I want `img[x]` to be displayed.

The following code works:

```
$("#part2").waypoint(function(event, direction) {
   if (direction === 'down') {
      $(".container").attr("id", "img2");
   }
   else {
      $(".container").attr("id", "img2");
   }
});

```

However, I have 18 'parts' and I don't want this code 18 times. I tried using a `for` loop
like this:

```
var chapters = $("[id^='part']");

for (var i=1; i<=chapters.length; i++){

    $("#part[i]").waypoint(function(event, direction) {
       if (direction === 'down') {
          $(".container").attr("id", "img[i]");
       }
       else {
          $(".container").attr("id", "img[i]");
       }
    });
}

```

But again, not working. Is it possible to escape the selector with square brackets like I've done? If not, what's the correct way to achieve this?