Help with .each

JavaScript
1

Hello,

I am using .each along with custom data attributes in a jquery script.

I have run into a small issue.
I won’t post the whole code on here but I will post a more simplified version.

Please do not criticize me on my hypothetical code, because I know some people love doing this :slight_smile:

Here is my code:

<div data-video-id="1"></div>
<div data-video-id="1"></div>
<div data-video-id="2"></div>
<div data-video-id="3"></div>
<div data-video-id="4"></div>

<script>
    $('div[data-video-id]').each(function(){
           videoid = $(this).attr('data-video-id');

        $(function() {
            alert(videoid);
        });      
    });
</script>

Ok, here is the problem. You see that alert? It is suppose to display an alert of every data-video-id.
The problem is that when the alert is INSIDE the function it displays only the first data-video-id and repeats it.

e.g It does the equivalent of this:

alert(“1”);
alert(“1”);
alert(“1”);
alert(“1”);

It works perfect when it isn’t wrapped in the function, but I NEED it to be in the function.

This is what I need it to do:
alert(“1”);
alert(“2”);
alert(“3”);
alert(“4”);

2

Hi there,

I would do it like this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery each</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div data-video-id="1"></div>
    <div data-video-id="2"></div>
    <div data-video-id="3"></div>
    <div data-video-id="4"></div>

    <script>
      $('div[data-video-id]').each(function(){
        alert($(this).data("video-id"));
      });
    </script>
  </body>
</html>

A couple of things to note:[LIST]
[]You don’t need to wrap the alert in $(function() { ... });
[]You might also consider using console.log() for debugging. This would translate to console.log($(this).data("video-id"));. Here is a brief tutorial on why it is better and how you can view the output.
[*]As of jQuery 1.4.3 HTML 5 data- attributes are automatically pulled in to jQuery’s data object, so you can write $(this).data("video-id") instead of $(this).attr('data-video-id')[/LIST]HTH

3

Hello,

Thank you for your response.

I need to wrap the alert into a function. Here is my full code and why it needs to be in a function (unless there is another way)

<script>
    $('div[data-video-id]').each(function(){
           videoid = $(this).attr('data-video-id');
        videoposter = $(this).attr('data-video-poster');
        videourl = $(this).attr('data-video-url');
        videoheight = $(this).attr('data-video-height');

        $(this).jPlayer({
         ready: function () {
               $(this).jPlayer("setMedia", {
                  m4v: ""+videourl+"",
                  poster: ""+videoposter+""
               });
         },
         play: function() { // To avoid both jPlayers playing together.
             $(this).jPlayer("pauseOthers");
            },
         cssSelectorAncestor: "#jp_container_"+videoid,
         swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
         supplied: "m4v",
         size: { width: "100%", height: ""+videoheight+""}
         
       }); 
           
    });
    </script>

Basically this part in the code isn’t working as it should be.

$(this).jPlayer({
         ready: function () {
               $(this).jPlayer("setMedia", {
                  m4v: ""+videourl+"",
                  poster: ""+videoposter+""
               });
         },

I will also update the code using .data thank you for this.

4

Hi there,

Oh, ok.

The problem is however, that this:

$(function() {
  alert(videoid);
});

is a short cut for this:

$(document).ready(function() {
  alert(videoid);
});

which, as we know, binds a function to be executed when the DOM has finished loading.

This is probably why you are seeing unexpected results.

Maybe you meant to do this:

(function() {
  alert(videoid);
})($);

which turns it into an anonymous function, which will then output the correct results.

Apart from that, I don’t know an awful lot about jPlayer, I’m afraid.
If you can post a link to a page where I can see this not working, I don’t mind having a look for you.

HTH