Javascript Jquery Next（）在使用表时未正确高亮显示下一个元素

我有一张桌子，每行代表一首歌

单击歌曲时，应使用.active类以浅蓝色突出显示父td，如果以前突出显示过任何歌曲，则应删除父td的.active类

此部分工作正常，并用以下jquery表示：

$(".songs").click(function(){
    $('.songs').parents('td').removeClass('active');
    $(this).parents('td').addClass('active');
});

我还想有一个“下一步”按钮和一个“上一步”按钮。这是我遇到问题的地方。单击“下一步”按钮时，列表上的下一首歌曲应高亮显示，而先前高亮显示的歌曲应取消高亮显示（我正在使用class.active进行高亮显示和取消高亮显示）。此部分不起作用：

$('#next_button').click(function(){
    var current = $('td.active');
    $('.songs').parents('td').removeClass('active');
    current.nextAll('td:first').addClass('active');
});

以下是JSFIDLE链接：

以下是我的html代码：

<table id="song_table">
    <thead id="song_thead">
    <tr>
        <th id="table_head">Songs</th>
    </tr>
    </thead>
    <tbody id="song_tbody">
        <tr>
            <td class="td_songs">
                <a class="songs">
                    1
                </a>
            </td>
        </tr>
        <tr>
            <td class="td_songs">
                <a class="songs">
                    2
                </a>
            </td>
        </tr>
    </tbody>
</table>
<div id="next_button">
    <p id="next_text">Next Button</p>
</div>

这是我的jquery

$(document).ready(function() {
    $(".songs").click(function(){
        $('.songs').parents('td').removeClass('active');
        $(this).parents('td').addClass('active');
    });
    $('#next_button').click(function(){
        var current = $('td.active');
        $('.songs').parents('td').removeClass('active');
        current.nextAll('td:first').addClass('active');
    });
});

如果你能帮我解决这个问题，我将不胜感激。我觉得这应该很容易，但我就是不能让它工作

---

谢谢

诀窍是获取当前歌曲的行索引，加1，然后对行数进行模运算，如果当前行+1溢出行数，它将从头开始：

$（）.ready（函数（））{
$（“.songs”）。单击（函数（）{
$（'.songs'）.parents（'td'）.removeClass（'active'）；
$（this）.parents（'td'）.addClass（'active'）；
});
$（“#下一步按钮”）。单击（函数（）{
//此处。parent（）将获取当前
//.parent（）.index（）将获取当前
var currentID=$（'td.active'）.parent（）.index（）；
//这里，parent（）将获得
//.parent（）.parent（）将获取
//.parent（）.parent（）.children（）将获取所有行
//.parent（）.parent（）.children（）.length将获取行计数
var nextID=（currentID+1）%（$（'td.active'）.parent（）.parent（）.children（）.length）
$（'.songs'）.parents（'td'）.removeClass（'active'）；
$（'td'）.eq（nextID）.addClass（'active'）；
});
});
.active{
背景色：#D9FAFA；
}
桌子{
文本对齐：居中；
高度：100px；
宽度：200px；
}
#桌头{
文本对齐：居中；
}
#下一步按钮{
高度：100px；
宽度：2d00px；
背景颜色：浅绿色；
}

歌曲
1.
2.
3.
4.
下一步按钮

在您的代码中，每个
td
都有自己的
tr
意味着没有下一个
td
可去

您应该调整jquery以将焦点放在行上，如中所示（如下所示）

您还会注意到我使用的是
.next（）
，它将只显示或显示与参数匹配的下一个元素（在本例中为
tr
）-无需获取全部，只显示第一个元素

所有这些都将使您的小提琴表现出预期的效果，但是，如果您想在每个
tr
中瞄准
td
，您必须添加
。查找（'td'）
，从检索到的
tr
中取出
td
，如。这里唯一更改的行是单击next时添加类的行，现在是：
current.parent（）.next（'tr'）.find（'td'）.addClass（'active'）

重构出
$（'.songs'）.parents（'tr'）.removeClass（'active'）到它自己的函数中也会清除一些代码，使其更易于遵循，这是一个好习惯！（另外+1用于使用变量存储返回的JQuery DOM对象-
var current=$（'tr.active'）；
-另一个提高代码清晰度和效率的好习惯，特别是当您使用更复杂的DOM结构和函数时）
类似的情况

您需要进入DOM，然后在所有兄弟节点所在的位置，可以进入
next（）
one

此外，还为您添加了一个上一个按钮

$().ready(function () {
    $(".songs").click(function () {
        $('.songs').parents('td').removeClass('active');
        $(this).parents('td').addClass('active');
    });
    $('#next_button').click(function () {
        $('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
    });
    $('#previous_button').click(function () {
        $('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
    });
});

没有任何兄弟td元素。请选择下一步。谢谢！工作perfect@Greg很高兴我能帮忙：）
$().ready(function() {
    $(".songs").click(function(){
        $('.songs').parents('tr').removeClass('active');
        $(this).parents('tr').addClass('active');
    });
    $('#next_button').click(function(){
        var current = $('tr.active');
        $('.songs').parents('tr').removeClass('active');
        current.next('tr').addClass('active');
    });
});

$().ready(function () {
    $(".songs").click(function () {
        $('.songs').parents('td').removeClass('active');
        $(this).parents('td').addClass('active');
    });
    $('#next_button').click(function () {
        $('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
    });
    $('#previous_button').click(function () {
        $('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
    });
});