загрузить следующий элемент XML по клику через ajax и jquery

Question

Мне нужно иметь возможность циклически перебирать XML-файл, используя функцию щелчка. Когда страница загружается, я хочу, чтобы загружался только 1 элемент xml, а затем с помощью функции щелчка загружаем следующий элемент. Вроде как слайдер контента, но загружает каждый по запросу. Я использую его для показа вашего видео с заголовком.

Вот мой код ...

$(document).ready(function(){ 
$.ajax({
type: "GET",
    url: "video.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('video').each(function(){
            var title = $(this).find('title').text();
            var embed = $(this).find('embed').text();
            $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>').appendTo('#video_block');
        });
    }
});
});

Вот код XML:

<video>
<title>Title 1 here</title>
<embed>FScJfrh80UY</embed>
</video>

<video>
<title>Title 2 here</title>
<embed>FScJfrh80UY</embed>
</video>

Большое спасибо за любую помощь.

EDIT

Вот мой текущий код - нужна была небольшая настройка из-за некоторых ошибок ...

$(document).ready(function(){ 
var i = 0;
getVid();
$('#prev').bind('click', function() {
i--;
getVid();
$('.video').remove()    
return false;

})
$('#next').bind('click', function() {
i++;
getVid();
$('.video').remove()
return false;

})
function getVid() {
$.ajax({
type: "GET",
    url: "video.xml",
    dataType: "xml",
    success: function(xml) {
        oVid = $(xml).find('video:eq('+i+')');
        var title = oVid.find('title').text();
        var embed = oVid.find('embed').text();
            $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+'" frameborder="0"></iframe><h2>'+title+'</h2>').appendTo('#video_block');
    }
});
}
});

Это вроде работает, но существуют следующие проблемы:

• По умолчанию должен отображаться первый элемент xml - в данный момент он ничего не показывает. *** Я знаю, это работает. Поместите getVid () перед функциями события click!
• Когда вы нажимаете «next» в первый раз, он запускается на втором элементе xml.
• Когда вы нажимаете «следующий» на последнем элементе, он должен вернуться к первому. В настоящее время он пытается найти следующий элемент, но возвращается ни с чем (очевидно, что ничего не существует после последнего!)

Еще раз большое спасибо !!!!!

Answer 1

var i = 0;

$('#prev').bind('click', function() {
    i--;
    getVid();
}
$('#next').bind('click', function() {
    i++;
    getVid();
}
function getVid() {
    $.ajax({
        type: "GET",
        url: "video.xml",
        dataType: "xml",
        success: function(xml) {
            oVid = $(xml).find('video:eq('+i+')');
            var title = oVid.find('title').text();
            var embed = oVid.find('embed').text();
            $('#videoDiv').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>');
        }
    });
});

Этот код, вероятно, не будет работать напрямую, но это идея.Поиграйте с ним, и вы начнете.

edit

Я забыл увеличить i, поэтому событие click не сработало!

edit2

Если вы сделаете кнопку с идентификатором 'prev' и кнопкой с идентификатором 'next', отредактированный выше код должен работать.