Trouble getting value from form element

I'm building basically a visually appealing version of an option-select element.

I'm making a ul that will have a .selected class applied to whatever item is clicked.

            <ul id="videolist" class="tilelist"> 
                <li id="video-'. $video-id .'">
                        <img src="assetsPath/etc/'. $video-thumb .'" />
                        <h4>'. $video-title .'</h4>
                        <p class="hidden vid-id">'. $video-id .'</p>
                    </li>
                ';} 开发者_开发知识库?>
            </ul>

            <input id="videoId" class="hidden" value="<?php echo $current->video ?>" />

and then some jquery:

$(function(){

    $('#videolist li').click( function() {

        $('#videolist li').removeClass('selected');
        $(this).addClass('selected');

        var vidId = $(this).find('.vid-id').val();
        alert (vidId);
        $('#videoId').val( vidId );
    }); 
}); 

the issue is with $(this).find('.vid-id').val(); doesn't seem to be returning anything. I don't see anything wrong with the selector but I am a bit new to jquery.

What you are looking for is text() not val() if you are meaning to pull this from the p tag.

If you want to pull it from the input you're going to have to select the id like this: $(this).find('#videoId').val();

Also, you don't need to add css properties to hide the input, you can just do type="hidden"