jquery how to reach the end of an object

Question

I have a previous and next link that appends text to a div, however I have been trying to figure out how to append to the ul from the treeObj . I also cant seem to start the page off on the first ID. It starts blank.

  $("#next-bt").click(function() {
    $('.tracks').removeClass('selected');
    clickedID++;

    if (clickedID > lastIndex)
      clickedID = firstIndex;
    $('#' + (clickedID) + '_tracks').addClass('selected');
    document.getElementById('player-digital-title').innerHTML = treeObj.root[clickedID - 1].trackName;


  });

https://jsfiddle.net/5f4uzokf/

Answer 1

Since you already control the clickedID in the next-btn / prev-btn handlers, you can disable the links there, instead of just resetting it.

Working jsFiddle: http://jsfiddle.net/LLf2c0hp/1/

Additionally, you don't need to mix pure JavaScript and jQuery, unless there is a reason I didn't see.

For instance, instead of

document.getElementById('player-digital-title').innerHTML = treeObj.root[clickedID - 1].trackName;

you could do

$('div#player-digital-title').html(treeObj.root[clickedID - 1].trackName);

Answer 2

You can manually trigger the Next button in document ready:

$("#next-bt").click();

And you can add a condition in your handler to cancel the event:

if(clickedID > lastIndex)
{
    clickedID--;
    $("#next-bt").css('cursor', 'default');
    $('#' + (clickedID) + '_tracks').addClass('selected');
    document.getElementById('player-digital-title').innerHTML = treeObj.root[clickedID - 1].trackName;
    return;
}

Here's the DEMO .

Answer 3

I noticed that you didn't append your ul element with its child li elements on to the page, and that's why it wasn't working. I changed that and a couple other small things too. Below is your updated code. I hope you find it okay :-)

Updated

 $(document).ready(function() { var treeObj = { "root": [{ "id": "1", "trackName": "Whippin Post" }, { "id": "2", "trackName": "Sweet Caroline" }, { "id": "3", "trackName": "Tears in Heaven" }, { "id": "4", "trackName": "Ain't She Sweet" }, { "id": "5", "trackName": "Octopus' Garden" }, { "id": "6", "trackName": "Teen Spirit" }, { "id": "7", "trackName": "Knockin on Heaven's Door" }, { "id": "8", "trackName": "Whales" }] }; var clickedID = 1; var count = treeObj.root.length; var firstIndex = 0, lastIndex = 0; var $ul = $("<ul></ul>"); $.each(treeObj.root, function(i, v) { $ul.append( $("<li></li>").append($("<a></a>") .attr({ "class": "tracks", "id": v.id + '_tracks', "href": v.id, "data-file": v.trackFile }) .html(v.trackName) ) ); var index = i; if (index == 0) firstIndex = v.id; if (index == count - 1) lastIndex = v.id; }); //append ul $("#player-digital-title").append($ul); $("#player-digital-title ul li:nth-child(1) a").addClass('selected'); $("#prev-bt").addClass('disabled'); $("#next-bt").click(function() { $('.tracks').removeClass('selected'); $("#prev-bt").removeClass('disabled'); if (clickedID < lastIndex) { clickedID++; if (clickedID == lastIndex) { $("#next-bt").addClass('disabled'); } } $('#' + (clickedID) + '_tracks').addClass('selected'); }); $("#prev-bt").click(function() { $('.tracks').removeClass('selected'); $("#next-bt").removeClass('disabled'); if (clickedID > 1) { clickedID--; if (clickedID == 1) { $("#prev-bt").addClass('disabled'); } } $('#' + (clickedID) + '_tracks').addClass('selected'); }); }); 

 .selected { color: pink } #player-digital-title ul li { list-style: none; } .disabled { color: grey } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <audio id="audio-player" name="audio-player" src=""></audio> <a id="next-bt" href="#"> <div class="player-musicnav-ff-column3"> <ul class="musicnav-ff"> <li class="ff">NEXT</li> </ul> </div> </a> <a id="prev-bt" href="#"> <div class="player-musicnav-ff-column3"> <ul class="musicnav-ff"> <li class="ff">PREV</li> </ul> </div> </a> <br/> <br/> <div id="player-digital-title"> </div>