$(this > 'li') doesn't seem to point to what I think it should
This is a continuation of my last post which I closed.
here is my json file:
- {
- "Misc" : {
- "anymore" : ["anymore.ogg","anymore.mp3"],
- "dark side" : ["darkside.ogg","darkside.mp3"],
- "failure to communicate" : ["comm.ogg","comm.mp3"],
- "count" : ["count.ogg","count.mp3"]
- },
- "Napoleon Dynamite" : {
- "Bow to your Sensi" : ["bow2sensei.ogg","bow2sensei.mp3"],
- "Cage Fighter" : ["cagefighter.ogg","cagefighter.mp3"],
- "Skills" : ["skills.ogg","skills.mp3"]
- }
- }
here is my script:
- $(document).ready(function() {
- $('#sounds').click(function(e) {
- e.preventDefault();
- $.getJSON('soundsNew.json', function(data) {
- var html = '';
- $.each(data, function(catKey, catValue) {
- html += '<li class="catkey">' + catKey + '</li>';
- html += '<ul>';
- $.each(catValue, function(iKey, iValue) {
- html += '<li class="go">' + iKey + '<audio class="sound"><source src="./' + catKey + '/' + iValue[0] + '" type="audio/ogg"><source src="./' + catKey + '/' + iValue[1] + '" type="audio/mpeg"></audio></li>';
- });
- html += '</ul>'
- $('#list').html(html);
- $('.go').css("display","none");
- });
- });
- $('#list').on('click', 'li', function(e){
- e.stopPropagation();
- $(this > 'li').css("display","block");
- });
- $('#list').on('click', '.go', function(e) {
- e.stopPropagation();
- $('audio').each(function() { this.pause(); }); //Stop all
- $('audio', this)[0].play(); // Play this one
- });
- });
- });
The problem is on line 19 it's supposed to display the children of the menu item I clicked on.
If you removed line 14 you would see
this
leaving line 14 in will just display the categories.
What I'm trying to do have it so if you click on a category such as "Misc", items under that category will appear.