SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: help with .each

  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with .each

    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

    Here is my code:

    Code JavaScript:
    <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    I would do it like this:

    HTML Code:
    <!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:
    • 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')
    HTH

  3. #3
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

    Code JavaScript:
    <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.

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


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

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Quote Originally Posted by Jaynesh View Post
    I need to wrap the alert into a function.
    Oh, ok.

    The problem is however, that this:

    Code JavaScript:
    $(function() {
      alert(videoid);
    });

    is a short cut for this:

    Code JavaScript:
    $(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:

    Code JavaScript:
    (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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •