Problemy z funkcją IIFE. "Is not a function"?!

Question

Cześć, mam problemz funkcją IIFE. Nie wiem dlaczego odwołanie się do istniejącego elementu tablicy wywołuje error:
Uncaught TypeError: elements[i].find is not a function (linia 48)
Dlaczego dzieją się takie cuda? Jak to naprawić? Wrzucam też osobno kod:

​
var elements = $(".Wallop2").find(".Wallop-item");
var x = elements.length;
$(".loading").load('img/icons/loading.svg');
var wavesurfer = [];
for (var i = 0; i < x; i++) {(function(i){
  var song = i * 2 + 1;
  var str1 = song.toString();
  var str2 = "#waveform";
  var waveform1 = str2.concat(str1);
  song = song + 1;
  str1 = song.toString();
  var waveform2 = str2.concat(str1);

  wavesurfer[i*2] = WaveSurfer.create({
    container: waveform1,
    waveColor: '#5C6366',
    progressColor: 'white',
    height: 100,
    normalize: 1
});

  wavesurfer[i*2+1] = WaveSurfer.create({
    container: waveform2,
    waveColor: '#5C6366',
    progressColor: 'white',
    height: 100
});
  wavesurfer[i * 2].load("audio/before" + song + ".mp3");


  wavesurfer[i * 2].on("ready", function f(x) {
    wavesurfer[i * 2 + 1].load("audio/after" + song + ".mp3");
  });

  var graj = 1; // 1 czy 2 kawałek grać czyli wersję przed czy po obróbce.
  var time = 0;
  var playornot = 0; // Play-Pause

  wavesurfer[i * 2].on("seek", function f(x) {
    time = wavesurfer[i * 2].getCurrentTime();
  });

  wavesurfer[i * 2 + 1].on("seek", function f(x) {
    time = wavesurfer[i * 2 + 1].getCurrentTime();
  });

  wavesurfer[i * 2 + 1].on("ready", function f(x) {
    elements[i].find(".loading").remove();
    elements[i].find(".example").addClass("flip");
    elements[i].find(waveform1).removeClass("ukryj");
    elements[i].find(".play").load('img/icons/play.svg');
    elements[i].find(".after").load('img/icons/after.svg');
  });

  })( i );
}

HTML:
 

<div class="Wallop2 Wallop--slide">
<div class="Wallop-list" style="padding: 25px;">



<div class="Wallop-item">
<div class="client">
<div class="image" id="avatar3"></div>
<div class="name">Mike Woods</div>
<div class="country">Australia</div>
<div class="cytat"><div class="quote"></div><p style="text-indent: 0px;"></p></div>
<div class="example">
    <div class="loading"></div>
    <div class="play"></div>
    <div class="after"></div>

    
    <div class="wave">
        <div id="waveform3" class="ukryj"></div>
        <div id="waveform4" class="upwave ukryj"></div>
    </div>

</div>
</div>
</div>




<div class="Wallop-item">
<div class="client">
<div class="image" id="avatar1"></div>
<div class="name">dfdf</div>
<div class="country">Polska</div>
<div class="cytat"><div class="quote"></div><p style="text-indent: 0px;">uuu</p></div>
<div class="example">
    <div class="loading"></div>
    <div class="play"></div>
    <div class="after"></div>
    <div class="wave">
        <div id="waveform1" class="ukryj"></div>
        <div id="waveform2" class="upwave ukryj"></div>
    </div>
</div>
</div>
</div>


<div class="Wallop-item">
<div class="client">
<div class="image" id="avatar2"></div>
<div class="name">yyy</div>
<div class="country">Polska</div>
<div class="cytat"><div class="quote"></div><p style="text-indent: 0px;">xxx</p></div>
<div class="example">
    <div class="loading"></div>
    <div class="play"></div>
    <div class="after"></div>

    
    <div class="wave">
        <div id="waveform5" class="ukryj"></div>
        <div id="waveform6" class="upwave ukryj"></div>
    </div>

</div>
</div>
</div>

  </div>
  <div class="Wallop-buttonPrevious prev"></div>
  <div class="Wallop-buttonNext next"></div>
</div>
</section>
</div>
</div>

 

Answer 1

A coś takiego działa? Bo błąd już się nie pokazuje (albo nie ogarniam codepena :P )

http://codepen.io/anon/pen/KzNdyR?editors=1010

Comments

www.amalamastering.com -> KONSOLA :)

---

Nie zmieniłeś "i" na "e" i nie zrobiłeś w IIFE return function... Ja zamieniłem i > e oraz zwróciłem funkcję wewnątrz IIFE - przyjrzyj się kodowi na Codepen :) 

Ja widzę inny kod (u Ciebie VS na codepen ode mnie) :D http://imgur.com/uxyTfPB

---

Niestety ta wersja nie działa, mimo, że error zniknął.

---

Czy na pewno prawidłowo podpiąłeś tego WaveSurfer w HTML?

Bo ten kod chyba działa (tzn. brak błędów i console.log pokazuje obiekt jakiś z tej funkcji)

http://codepen.io/anon/pen/KzNdyR?editors=1011

Na codepen podpiąłem ten plugin w ten sposób (link z głównej strony pluginu):

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>

---

Tak, pobrałem tą wtyczkę i trzymam plik min.js na serwerze. Działało to już wcześniej ale dla pewności podpiąłem źródło zewnętrzne - efekt ten sam czyli niestety nadal nie działa.

Answer 2

Kod ma za zadanie wyszukiwać elementy wallop-item i w pętli for konstruować obiekty i umieszczając je w tablicy i definiować obsługę zdarzeń wtyczki wavesurfer.js.