如何在多個div中添加文本jQuery/JS

Question

對於jQuery/JavaScript，我是一個noobie，所以我一直在玩它。 我在這裏延伸了codepen：http://codepen.io/chantific/pen/XbrdEg。 我想要做的是將我在「youtube-title」div中的文本附加到我的「播放按鈕」div中。但是，顯而易見的問題是，在所有三種情況下，所有三個div中的文本都會附加到「play-button」div中。我想知道我是否可以分別追加每個div的內容？這裏是我的codepen：http://codepen.io/anon/pen/ZbBajz

相反的：

Video1 
man 
pig 
babe 

Video2 
man 
pig 
babe 

Video3 
man 
pig 
babe 

這就是我想要的東西：

Video1 
man 

Video2 
pig 

Video3 
babe 


<div class="youtube-container"> 
    <div class="youtube-player" data-id="b3DRdtSAHrY"></div> 
    <div class ="youtube-title"><p>man</p></div> 
</div> 

<div class="youtube-container"> 
    <div class="youtube-player" data-id="b3DRdtSAHrY"></div> 
    <div class ="youtube-title"><p>pig</p></div> 
</div> 

<div class="youtube-container"> 
    <div class="youtube-player" data-id="b3DRdtSAHrY"></div> 
    <div class ="youtube-title"><p>babe</p></div> 
</div> 

// JS/jQuery的

(function() { 
    var v = document.getElementsByClassName("youtube-player"); 
    for (var n = 0; n < v.length; n++) { 
     var p = document.createElement("div"); 
     p.innerHTML = labnolThumb(v[n].dataset.id); 
     p.onclick = labnolIframe; 
     v[n].appendChild(p); 
    } 
})(); 
function labnolIframe() { 
    var iframe = document.createElement("iframe"); 
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=0&border=0&wmode=opaque&enablejsapi=1&controls=2"); 
    iframe.setAttribute("frameborder", "0"); 
    iframe.setAttribute("id", "youtube-iframe"); 
    this.parentNode.replaceChild(iframe, this); 
} 
function labnolThumb(id) { 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>'; 
} 
$(".youtube-title") 
    .appendTo(".play-button"); 

欣賞的幫助。

Answer 1

看起來很簡單，但你應該做一些改變，因爲html看起來不太好。

您有三個相同的HTML片段，因此如果您想要將不同的東西粘貼到它們上，請使它們不同。例如增加第二類容器

<div class="youtube-container otherclass"> 
    <div class="youtube-player" data-id="b3DRdtSAHrY"></div> 
    <div class ="youtube-title"><p>man</p></div> 
</div> 

（你也可以添加一個數據屬性，ID，任何你想要的）

然後你可以改變一點點你的JS將代碼粘貼到每一個div例如：

function pasteText($selector) { 
    //Selector must be a valid jQuery selector. 
    $selector 
    .appendTo(".play-button"); 
} 

//And then you call it for every div you need, with the right selector 
//pasteText($(".youtube-container.otherclass")) 

我沒有給你編碼的解決方案完成，但我認爲你會明白。希望能幫助到你。