javascript - 如何添加 div 以跨越此表行？

Question

我有这样一个表行:

        <tr class="song-row song-row-selected" data-id="1">
                <td data-col="title">
                    <span class="song-content">
                        <img src="img/cover3.jpg" />
                        Song Title
                    </span>
                </td>
                <td>3:37</td>
                <td>song artist</td>
                <td>song album</td>
                <td>23</td>
            </tr>

我想加一个div表示歌曲暂停(用*包围):

        <tr class="song-row song-row-selected" data-id="1">
                <td data-col="title">
                    <span class="song-content">
                        <img src="img/cover3.jpg" />
                        Song Title
                        *<div class="song-indicator loading"></div>*
                    </span>
                </td>
                <td>3:37</td>
                <td>song artist</td>
                <td>song album</td>
                <td>23</td>
            </tr>    

我希望使用 JQuery。到目前为止，我有:

function displayPause() {
    $('tr.song-row.song-row-selected:first').each(function() {
        $(this).siblings('td span.song-content').add('<div class="song-indicator paused"></div>');
    });
}

不用说，它不添加 div。另外，我想要一个功能，可以轻松地从 span 中删除 div。有谁知道在哪里指出正确的方向？

Answer 1

您应该使用 append 以及 children，而不是 siblings

$(this).children('td span.song-content').append('<div class="song-indicator paused"></div><input type="button" class="removeDiv" value="Remove"/>');

我还在您的 div 旁边添加了一个按钮，单击此按钮将使用以下代码删除该 div:

$(document).on("click", ".removeDir", function() {
    $(this).prev(".song-indicator").remove();
    $(this).remove();
});