jQuery 获取显示的 div id

Question

我有以下代码：

<div class="sequence-container"> 
  <div id="1"></div>
  <div id="2"></div>
  <div id="3"></div>
</div>

和 jQuery：

$(window).load(function(){
    $('.sequence-container div:first').show(); // show first on load

    $('.next').click(function() {
        var $next = $('.sequence-container div:visible').next();
        if ($next.length) {
        $('.sequence-container div').hide();
            $next.show();
        }
    });

    $('.prev').click(function() {
        var $prev = $('.sequence-container div:visible').prev();
        if ($prev.length) {
            $('.sequence-container div').hide();
            $prev.show();
        }
    });

});

这非常好，允许用户在 div 中来回移动。但是，我想做的是带回当前显示的div 的ID。我正在苦苦挣扎 - 有什么建议吗？

Answer 1

jQuery attr() 函数将允许您检索 id 值，如下所示：

$(this).attr('id');

注意：$(this) 指的是 jQuery 选择器的 DIV。

Answer 2

你可以使用jQuery visible selector

$("div:visible").attr("id");  

它将选择可见的div

Answer 3

您可以将其添加到此部分：

$('.next').click(function() {
    var $curr = $('.sequence-container div:visible');
    var id = $curr.attr('id');
    var $next = $curr.next();
    if ($next.length) {
        $('.sequence-container div').hide();
        $next.show();
    }
});