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

Question

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

Navigation

#1 by (3 votes)

4

I'm starting to develop a video gallery where I'll upload 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>

In each list item, I'll get the data-videoID="El3IZFGERbM" to be able to create a video div / box where the video will be generated for playback.

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

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

I've even tried to use .each() in this var above, but I'm not getting any 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 when 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><divid="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 the link from your GitHub / site account) will be included in the project for your help! Thank you.

javascript jquery

asked by anonymous 12.09.2016 / 03:39

1 answer

Filter filenames in uppercase and with a certain length at the end How to concatenate date in sql server

score 3 · Accepted Answer

Iterates from '.ytVideo' and appends that element to .each . Something like this:

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><divid="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>