如何添加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

您應該同時使用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();
});

Answer 3

這是jsfiddle上的一個小樣本

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