How to get data attribute with jQuery .each()

Question

I work on a portfolio where there a few people. Each person has a demo and a click on the person should lead to the video.

My problem is that it returns the same videoid for everyone.

Here is what looks like a person container (I got 8 of them). I removed some code to keep the essential.

<div class="personnecontainer">
  <h2 class="nompersonne">Nom</h2>
  <div class="demo<?php echo $i; ?> democontainer" role="button" data-videoid="<?php the_sub_field('demo'); ?>">
    <p class="vert titrelh60v2">Mon démo</p>
  </div>
</div>

I managed to create javascript code that almost work.

<script>
jQuery( document ).ready(function() {
    jQuery('.democontainer').each(function(){
        jQuery(this).click(function() {

            jQuery('.socialcontainer').fadeOut('300');

            jQuery('.page-content').fadeOut(300, function() {
                var videoid = jQuery('.democontainer').data('videoid');

                var contenup1 = "<div class='js-video vimeo widescreen'><iframe id='video1' src='//player.vimeo.com/video/";
                var contenup2 = videoid;
                var contenup3 = "?color=009999&amp;title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=video1' width='580' height='326' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>";
                jQuery('.page-content').html(contenup1+contenup2+contenup3).fadeIn(300);

            });
        });
    })
}); // Fin document ready
</script>

What should I modify, where is my error?

Wilmer · Accepted Answer · 2015-01-25 19:28:54Z

1

jQuery is always getting the first item in the collection of .democontainer, you should use jQuery(this) to get the clicked element:

<script>
jQuery( document ).ready(function() {
    jQuery('.democontainer').each(function(){
        jQuery(this).click(function() {
            var videoid = jQuery(this).data('videoid');
            jQuery('.socialcontainer').fadeOut('300');
            jQuery('.page-content').fadeOut(300, function() {
                var contenup1 = "<div class='js-video vimeo widescreen'><iframe id='video1' src='//player.vimeo.com/video/";
                var contenup2 = videoid;
                var contenup3 = "?color=009999&amp;title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=video1' width='580' height='326' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>";
                jQuery('.page-content').html(contenup1+contenup2+contenup3).fadeIn(300);

            });
        });
    })
}); // Fin document ready
</script>

answered Jan 25, 2015 at 19:28

Wilmer

2,5091 gold badge14 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucien Dubois Over a year ago

It was that simple. Thank you!

Wilmer Over a year ago

Also you might not need the each() there I think you could just do jQuery('.democontainer').click(...);. Glad to help.

Collectives™ on Stack Overflow

How to get data attribute with jQuery .each()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related