如何添加div跨此表行内？

Question

I have a table row as such:

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

I want to add a div to indicate that the song is paused (surrounded by *):

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

I was hoping to use JQuery. So far I have:

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

Needless to say, it doesn't add the div. Also, I would like a function for me to easily remove the div from the span. Does anyone know where to point me in the right direction?

Answer 1

append is what you want:

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

This will ... append the div to the end of your span.

Also, as tymeJV says, your td is not a sibling of your tr ; it's a child. Use either children, or find to grab it.

And to remove it, you'd use remove . If I understand your app correctly, it should be something like this:

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

Answer 2

You should be using append as well as children , not siblings

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

I also added a button right next to your div, clicking this will remove that div with this code:

$(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>*");