Jquery将类添加到错误的语义答案

【问题标题】：Jquery adding class to wrong semanticJquery将类添加到错误的语义
【发布时间】：2013-11-06 00:39:38
【问题描述】：

我尝试使用下面的标记HTML 和script 构建图像滑块：

HTML

<div id="button-previous">prev</div>  <div id="button-next">next</div>


<figure>

<a href="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg" />
</a>

<a href="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg">
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
</a>

<a href="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg">
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
</a>

<a href="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg" >
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</a>

<figcaption>no need class "active" or "oldActive" or on figcation sematic</figcaption>

</figure>

脚本

$(document).ready(function () {
    $('figure a').first().addClass('active');
    $('figure a').hide();
    $('figure a.active').show();

    $('#button-next').click(function () {

        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {
            $('figure a').first().addClass('active');
        } else {
            $('figure a.oldActive').next().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();


    });

    $('#button-previous').click(function () {
        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure .oldActive').is(':first-child')) {
            $('figure a').last().addClass('active');
        } else {
            $('figure a.oldActive').prev().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();
    });

});

与 NEXT CLICK 相关的问题，（最后一个孩子）

#button-previous 没有任何问题。
但脚本仍然在<figcaption> 的最后一个孩子之后发送/添加class="active" figure a 在last-child of figure a 处单击#button-next。
并且滑块将停止功能旋转到第一个孩子回来。

[DEMO]

提前致谢。

【问题讨论】：

标签： javascript jquery html semantics addclass

【解决方案1】：

问题是在figure 标签内，figcaption 是最后一个孩子，而不是最后一个a 标签！所以$('#button-next').click的第二行要改成这样：

if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {

...到这个：

if ($('figure a.oldActive').is('figure a.oldActive:nth-last-child(2)')) {

jsfiddle

【讨论】：