使用表时，jQuery Next（）无法正确突出显示下一个元素

Question

I have a table with each row representing a song.

When a song is clicked, the parent td should be highlighted a light blue color with the .active class and if any song was highlighted previously the parent td's .active class should be removed.

This part works fine and is represented with this jquery:

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

I also want to have a next button and a previous button. This where I am having issues. When the next button is clicked, the next song on the list should be highlighted and the previously highlighted song should be unhighlighted (I am using the class .active to do the highlighting and unhighlighting). This part is not working:

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

Here is the jsfiddle link:

jsfiddle Link

Here is my html code:

<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>

Here is my 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;
}

Here is my 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');
    });
});

If you could help me solve this issue, I would greatly appreciate it. I feel like this should be so easy but I just can't seem to make it work.

Thanks!

Answer 1

The trick is to get the row index of the current song, add 1, and then do a modulo with number of rows that way if the current row+1 overflows the number of rows, it will start from the beginning:

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

in your code you have each td in its own tr meaning there is no next td to go to.

you should adjust your jquery to focus on the rows, as in this fiddle (shown below)

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

You'll also notice I'm using .next() which will just grab the next element or the next element which matches the argument (in this case tr ) - no need to get all then restrict to just the first.

All this will make your fiddle behave as expected, however, if you want to target the td 's within each of the tr 's you'll have to add .find('td') to get the td out of the retrieved tr , like this . Here the only line that is changed is the one that adds the class on click of next, which is now: current.parent().next('tr').find('td').addClass('active');

Refactoring out $('.songs').parents('tr').removeClass('active'); into it's own function would also clear your code a bit and make it easier to follow, a good habit! (also +1 for using a variable to store a returned JQuery DOM object - var current = $('tr.active'); - another good habit for code clarity and efficiency, especially when you are deraling with more complicated DOM structures and functions)

Answer 3

Something like this? http://jsfiddle.net/y5ntap04/3/

You needed to go up the DOM and then where all the siblings are, you can go to the next() one.

Plus added a previous button for you.

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