如何在多个 div 中附加文本 jQuery/JS

Question

我是 jQuery/JavaScript 的菜鸟，所以我一直在研究它。我在这里扩展代码笔：http://codepen.io/chantific/pen/XbrdEg。我想要做的是将 "youtube-title" div 中的文本附加到 "play-button" div 中。然而，明显的问题是所有三个 div 中的文本在所有三种情况下都附加到 "play-button" div 中。我想知道我是否可以分别附加每个 div 的内容？这是我的代码笔：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，如果您想向它们粘贴不同的内容，请将它们设为不同的。例如向容器

添加第二个 class

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

我不会给您完整的编码解决方案，但我认为您会明白的。希望对你有帮助。

如何在多个 div 中附加文本 jQuery/JS

How to append text in multiple divs jQuery/JS

html

javascript

jquery

appendto