Jquery Next() 在使用 table 时没有正确突出显示下一个元素

Question

我有一个 table，每一行代表一首歌。

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

这部分工作正常，用这个表示 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');
});

这是 jsfiddle link:

jsfiddle Link

这是我的 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>

这是我的 css:

.active{
    background-color: #D9FAFA;
}
table{
    text-align: center;
    height: 100px;
    width: 200px;
}
#table_head{
    text-align: center;
}
#next_button{
    height: 100px;
    width: 200px;
    background-color: lightgreen;
}

这是我的 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');
    });
});

如果你能帮我解决这个问题，我将不胜感激。我觉得这应该很容易，但我似乎做不到。

谢谢！

Answer 1

技巧是获取当前歌曲的行索引，加1，然后对行数取模，如果当前行+1溢出行数，则从头开始:

$().ready(function() {
    $(".songs").click(function(){
        $('.songs').parents('td').removeClass('active');
        $(this).parents('td').addClass('active');
    });
    $('#next_button').click(function(){
        //here .parent() will get the current <tr>
        //.parent().index() will get the index of the current <tr>
        var currentID = $('td.active').parent().index();
        //here .parent() will get the <tr>
        //.parent().parent() will get the <tbody>
        //.parent().parent().children() will get all the rows
        //.parent().parent().children().length will get the row count
        var nextID=(currentID+1)%($('td.active').parent().parent().children().length)
        $('.songs').parents('td').removeClass('active');
        $('td').eq(nextID).addClass('active');
    });
});

.active{
    background-color: #D9FAFA;
}
table{
    text-align: center;
    height: 100px;
    width: 200px;
}
#table_head{
    text-align: center;
}
#next_button{
    height: 100px;
    width: 2d00px;
    background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
                    <tr>
                        <td class="td_songs">
                            <a class="songs">
                                3
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_songs">
                            <a class="songs">
                                4
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
<div id="next_button">
    <p id="next_text">Next Button</p>
</div>

Answer 2

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

您应该调整 jquery 以专注于行，如 this fiddle（如下所示）

$().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');
    });
});

您还会注意到我正在使用 .next()，它只会 grab the next element 或与参数匹配的下一个元素（在本例中为 tr）- 无需获取然后全部限制在第一个。

所有这些都会使您的 fiddle 表现出预期的效果，但是，如果您想在每个 tr 中定位 td，则必须添加 .find('td') 以从检索到的 tr 中获取 td，例如 this。这里唯一更改的行是在单击下一步时添加 class 的行，现在是：current.parent().next('tr').find('td').addClass('active');

将 $('.songs').parents('tr').removeClass('active'); 重构到它自己的函数中也会稍微清除您的代码并使其更易于遵循，这是一个好习惯！（对于使用变量存储返回的 JQuery DOM 对象也是 +1 - var current = $('tr.active'); - 代码清晰和效率的另一个好习惯，特别是当你使用更复杂的 DOM 结构和函数)

Answer 3

是这样的吗？ http://jsfiddle.net/y5ntap04/3/

你需要上DOM，然后在所有兄弟姐妹所在的地方，你可以去next()。

另外为您添加了一个上一个按钮。

$().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');
    });
});

Jquery Next() 在使用 table 时没有正确突出显示下一个元素

Jquery Next() not highlighting next element correctly when using a table

javascript

jquery

html

next