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。另外，我想要一个函数来轻松地从跨度中删除 div。有谁知道在哪里指出我正确的方向？

Answer 1

追加是你想要的：

$(this).find('td span.song-content')
       .append('<div class="song-indicator paused"></div>');

这将......将 div附加到跨度的末尾。

此外，正如 tymeJV 所说，您的 td 不是您的tr;的兄弟姐妹。这是一个孩子。使用任一孩子，或找到抓住它。

要删除它，您可以使用remove. 如果我正确理解您的应用程序，它应该是这样的：

$('tr.song-row.song-row-selected:first')
        .find("div.song-indicator.paused").remove(); 

Answer 2

您应该使用appendas well 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();
});

Answer 3

这是 jsfiddle 上的一个小样本

$("tr.song-row-selected:first td span.song-content").append("*<div class='song-indicator loading'></div>*");