如何在多个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")) 

我没有给你编码的解决方案完成，但我认为你会明白。希望能帮助到你。