Question

I am working on a YouTube web application that allows the user to use a sortable list to add links using an input field. Once the url passes a match function to check the url structure, the video ID is grabbed and placed in an Array under it’s own index.

var _videoList = new Array();

if (matchesReg)
    {
    var container = document.getElementById('sortable');
    var _videoId; 
    //grab the video ID from the URL
    _videoId = _videoUrl.replace(/^[^v]+v.(.{11}).*/,"$1");
    //place the Videoid in an array
    _videoList[_videoList.length] = _videoId;
    var new_element = document.createElement('li');
    //set the id of the li element to match it's position in the array
    new_element.id = _videoList.length;
    new_element.innerHTML = _videoUrl;
    container.insertBefore(new_element, container.firstChild);
    //diplay the vaild link message
    document.getElementById('msg').style.display="block";
    document.getElementById('msg').innerHTML = "Video URL added!";
    // Clean input field
    document.getElementById('newVideo').value="";
    } else {
    //failed to pass the regex test, diplay error
    document.getElementById('msg').style.display="block";
    document.getElementById('msg').innerHTML = "Error! Not a valid YouTube URL.";
    }

What I want to do it add a link to each new li element that will pass the video id to a cue function. How might I go about starting to achieve this?

Answer 1

Here is something to get you started:

var refId = _videoList.length;
var $new_element = $('li').attr('id', refId);
var $link = $('a')
    .attr('href', _videoUrl)
    .innerHtml(_videoUrl)
    .data('refId', refId) // add parent li's id for reference in click event
    .appendTo( $new_element )
    .bind( 'click', function(){
        cue( $link.data('refId') );
        return false; // prevent browser's default click event
    });

$new_element.appendTo( container );