$ (function() {nicht Variable finden

Question

Ich versuche, diese Geige http://jsfiddle.net/C6LPY/2/

$(function() { 
    var parent = $("#shuffle"); 
    var divs = parent.children(); 
    while (divs.length) { 
     parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); 
    } 
}); 

Auf meiner Website hier zu verwenden:

https://github.com/craiglockwood/confheroes/blob/master/index.html aber bin immer ein 'nicht Variable finden' Fehler.

Die Idee ist es, die divs in zufälliger Reihenfolge jedes Mal die Seite geladen wird. Die Geige funktioniert, aber irgendwie nicht mit meinem Code zu mischen.

Jede Hilfe sehr APPRE zitiert.

Answer 1

Reihenfolge ist wichtig

Bewegen Sie den Inline-Javascript mit Ihrem IIFE nach dem Skript jQuery Referenzierung - entweder im head Element oder gegen Ende des body Element (this post für weitere Informationen über die Vorteile von ihnen lesen platzieren gegen Ende des body Elements). Andernfalls ist der jQuery-Code für das Inline-Skript nicht verfügbar. Weitere Informationen zum Einschließen externer Skripts finden Sie unter this guide.

<script type='text/javascript'> 
 
    //jQuery should not be loaded yet, so typeof $ should return undefined 
 
    console.log('typeof $ before including jQuery: ',typeof $); 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="assets/js/bootstrap.min.js"></script> 
 
<!-- at this point, jQuery should be defined, and $ should be usable as a shortcut for it.--> 
 
<script type='text/javascript'> 
 
    //ensure typeof $ is a function, otherwise it is likely the case that jQuery did not load 
 
    console.log('typeof $ after including jQuery: ',typeof $); 
 
    $(function() { 
 
    var parent = $("#shuffle"); 
 
    var divs = parent.children(); 
 
    while (divs.length) { 
 
     parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); 
 
    } 
 
    }); 
 
</script> 
 
<div id="shuffle">ShuffleDiv 
 
    <div>child div 1</div> 
 
    <div>child div 2</div> 
 
    <div>child div 3</div> 
 
</div>