Найти текущий элемент слайдера

Question

Я создаю веб-сайт со страницами, которые отображаются в виде слайдера. Каждая страница имеет уникальный идентификатор, но у всех есть класс с именем «раздел». Теперь мне кажется, что я не могу найти идентификатор div, который отображается на экране, идентификатор «ТЕКУЩАЯ СТРАНИЦА» (см. Прикрепленное изображение). Следующая/правая кнопка будет горизонтально прокручивать веб-сайт вправо, а предыдущая/левая кнопка будет прокручивать веб-сайт влево.

Сайт/экран макет:

Fiddle 1

Fiddle 2

Fiddle один имеет следующую кнопку/предыд внутри каждого DIV, но я хочу, чтобы контролировать движение дивы с одним набором кнопки next и prev.

Это Javascript я использую для следующих кнопок Prev /:

$('.next').stop().click(function() { 

    if($(this).closest('.checkout').next().css('display') == 'none'){ 
     alert('a'); 
    }else{ 
     $(this).parent().animate({ 
      marginLeft: '-100%' 
     }, 500); 
     $(this).parent().next().animate({ 
      marginLeft: '0%' 
     }, 500); 
     $(this).parent().animate({ 
      marginLeft: '-100%' 
     }, 500); 
    } 

}); 

$('.prev').click(function() { 

    $(this).stop().parent().animate({ 
     marginLeft: '0%' 
    }, 500); 
    $(this).stop().parent().prev().animate({ 
     marginLeft: '0%' 
    }, 500); 

    $(this).stop().parent().animate({ 
     marginLeft: '0%' 
    }, 500); 

}); 

Answer 1

Метод 1

Как насчет зацикливание над вашими checkout дивы и проверки, который является первым, чтобы иметь margin-left: 0px;?

function getCurrentPage(){ 
    var current = ""; 
    $.each($(".checkout"), function(){ 
     if($(this).css("margin-left") == "0px"){ 
      current = this.id; 
      return false; 
     } 
    }); 
    return current; 
} 

Fiddle 1: http://jsfiddle.net/rSuc6/3/

Fiddle 2: http://jsfiddle.net/SxBZx/3/

Метод 2

Работая дальше ответ Barthosz, вы можете также использовать глобальную переменную для отслеживания вашей страницы :

Fiddle: http://jsfiddle.net/SxBZx/5/

Метод 3

Вы также можете работать с active класса.

На каждом следующем/предыдущем нажмите:

//remove current active 
$(".active").removeClass("active"); 
//set new current to active 
$(this).addClass("active"); 
//retrieve ID of active 
$(".active").attr("id"); 

Answer 2

простейшими способа (для меня):

добавить это в ваш HTML, чтобы увидеть результат:

<span id="whichid"></span> 

добавить это перед ваш js

var page=0; 

внутри вашей, если добавить заявления:

page=page+1; 
$('#whichid').text(page); 

на следующей странице, а также:

page=page-1; 
$('#whichid').text(page); 

для предыдущей страницы.

Вы можете использовать: nthoftype или: child или какой-либо подобный селектор, чтобы получить идентификатор вашей страницы.