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

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

我有一个 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');
    });
});

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

谢谢!

技巧是获取当前歌曲的行索引,加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>

在您的代码中,每个 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 结构和函数)

是这样的吗? 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');
    });
});