Путевые точки и Inview, отслеживание нескольких элементов с помощью подстановочного знака

Question

У меня есть несколько разделов на странице с идентификатором как ss-section-storyss-section-problemss-section-solution и я пытаюсь отследить, когда каждый из этих разделов входит и выходит из области просмотра. Проблема в том, что с текущим кодом, который у меня есть, он отслеживает только первый раздел с идентификатором. ss-section, Я хочу иметь возможность отслеживать каждый раздел, входящий и выходящий.

JS

var inview = new Waypoint.Inview({
element: $('section[id^="ss-section"]')[0],
enter: function(direction) {
  console.log(this.element.id + ' enter');
},
entered: function(direction) {
  console.log(this.element.id + ' entered');
},
exit: function(direction) {
  console.log(this.element.id + ' exit');
},
exited: function(direction) {
  console.log(this.element.id + ' exited');
}
})

Я знаю, что это должно быть отслеживание только первого раздела, потому что на element вариант ограничен [0] в этом массиве, но когда я удалю это, я получу неопределенное в этих операторах console.log.

То, что я хотел бы иметь возможность сделать что-то вроде, но это, но, судя по документации, у него нет синтаксиса, как это:

$('section[id^="ss-section"]').Waypoint.Inview({
enter: function(direction) {
  console.log(this.element.id + ' enter');
},
entered: function(direction) {
  console.log(this.element.id + ' entered');
},
exit: function(direction) {
  console.log(this.element.id + ' exit');
},
exited: function(direction) {
  console.log(this.element.id + ' exited');
}
})

Любые предложения о том, как я могу отслеживать каждый отдельный раздел, используя только один экземпляр Waypoint.Inview

Answer 1

Во-первых, вы можете сделать коллекцию:

var $collection = $('section[id^="ss-section"]');

Затем сделайте итерацию:

$collection.each(function () {
   new Waypoint.Inview({
      element: this,
      enter: function(direction) {
         console.log(this.element.id + ' enter');
      },
      entered: function(direction) {
         console.log(this.element.id + ' entered');
      },
      exit: function(direction) {
         console.log(this.element.id + ' exit');
      },
      exited: function(direction) {
         console.log(this.element.id + ' exited');
      }
   })
})

Это все. По крайней мере, это работает для меня.