javascript – How to use '.each()' in a variable to get multiple '.attr()' from a list?

Question:

I'm starting to develop a video gallery that I'm going to upload to GitHub for anyone who wants to download and use it.

I have a list as follows:

<ul>
    <li><span class="everyVideo ytVideo" data-videoID="6AmRg3p79pM">Video 1</span></li>
    <li><span class="everyVideo ytVideo" data-videoID="El3IZFGERbM">Video 1</span></li>
    <!-- continua... -->
</ul>

For each item in the list, I will get the data-videoID="El3IZFGERbM" in order to create a box/video div, where the video will be generated for playback.

However, the way I'm doing it, I'm only getting the first data-video the list:

var videoID = $('.everyVideo').attr('data-videoID');

I've even tried using .each() on this var above, but I'm not getting positive results.

var videoID = $('.everyVideo').each(function (index, value){ $(this).attr('data-videoID'); });

Below I'll put a snippet of an excerpt of the code I'm working on at the moment I'm trying to solve this problem:

var ytTarget = $('#videoGallery .ytVideo');
var videoID = $('.everyVideo').attr('data-videoID');

// Video and thumnnails incorporation vars
var ytVideo = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/'+ videoID +'?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');
var ytThumb = $('<img src="http://img.youtube.com/vi/'+ videoID +'/default.jpg"/>');

$(document).ready(function() {
  if ($('.everyVideo').hasClass('ytVideo')){
    $('.ytVideo').append(ytThumb);
  } else {

  }
});

// Youtube Video
ytTarget.click(function(){
  $('#meuVideo, .nowPlaying').remove();
  ytVideo.insertAfter('.vidPlayer').hide().slideDown("fast");
});

// Fechar Videos
$('#close').click(function(){
  $('#meuVideo, .nowPlaying').remove();
});
.everyVideo, #close {cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="videoGallery">
<div class="vidPlayer"></div>
    <ul>
        <li><span class="everyVideo ytVideo" data-videoID="6AmRg3p79pM">Video 1</span></li>
        <li><span class="everyVideo ytVideo" data-videoID="El3IZFGERbM">Video 4</span></li>
        <li><span id="close">Fechar Tudo</span></li>
    </ul>
</div>

In the second image that appears, both the image and the video that appears when we click on the element, should be a different video. How do I resolve this?

Any code improvements are welcome and a note (along with your GitHub account/site link) will be included in the project for your help! Thanks.

Answer:

'.ytVideo' over '.ytVideo' and append to that element within .each . Something like:

var ytTarget = $('#videoGallery .ytVideo');

$(document).ready(function() {
    $('.ytVideo').each(function() {
        var videoID = $(this).attr('data-videoID');
        var ytVideo = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/' + videoID + '?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');
        var ytThumb = $('<img src="http://img.youtube.com/vi/' + videoID + '/default.jpg"/>');
        $(this).append(ytThumb);
        $(this).click(function() {
            $('#meuVideo, .nowPlaying').remove();
            ytVideo.insertAfter('.vidPlayer').hide().slideDown("fast");
        });
    });
});

// Fechar Videos
$('#close').click(function() {
    $('#meuVideo, .nowPlaying').remove();
});
.everyVideo, #close {cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="videoGallery">
<div class="vidPlayer"></div>
    <ul>
        <li><span class="everyVideo ytVideo" data-videoID="6AmRg3p79pM">Video 1</span></li>
        <li><span class="everyVideo ytVideo" data-videoID="El3IZFGERbM">Video 4</span></li>
        <li><span id="close">Fechar Tudo</span></li>
    </ul>
</div>
Post Views: 0
Scroll to Top