SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2001
    Location
    Southern Cal
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to apply a function to multiple elements with the same ID?

    Hi. After getting my feet wet with jQuery via a beginner's book and some tutorial videos I am setting up a page to play around with various animation methods and I am running into a problem applying a function to multiple elements with the same ID at once.

    HTML

    Code:
          <div id="playground">
            <div id="sandbox">
              <div id="toy">Lorem Ipsum</div>
            </div>
            <div id="sandbox">
              <div id="toy">Lorem Ipsum</div>
            </div>
            <div id="sandbox">
              <div id="toy">Lorem Ipsum</div>
            </div>
          </div>  
          <div id="control">
            <button class="reset">Reset</button>
            <button class="fontsize">Increase Font</button>
          </div>
    CSS

    Code:
    #playground {
        width: 900px;
        margin: 20px auto;
    }
    #sandbox {
        float: left;
        width: 300px;
        height: 400px;
    }
    #toy, #toy1, #toy2, #toy3 {
        width: 50px;
        height: 50px;
        padding: 5px;
        position: relative;
        background-color: #96ac1c;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
    }
    jQuery

    Code:
    (function() {
        // font size
        $('button.fontsize').click(function(){
             $('#toy').css('font-size','16px');
        });
    })();
    This only changed the font size for the first #toy div (no console errors). I went back to another tutorial that marked up various <span> elements across multiple <p> elements as well as some Google searching to get some guidance.

    Code:
    (function() {
        // font size
        $('button.fontsize').click(function(){
             $('#playground').find('#toy').each(function() {
                $('#toy').css('font-size','16px');
             });
         });
    })();
    
    or
    
    (function() {
    // font size
        $('button.fontsize').click(function(){
            $.each($('#toy'), function() {
                $(this).css('font-size','16px');
            });
        });
    })();
    Same result on both, only the first #toy div changes. I can get it to work by renaming each div and chaining $('#toy1,#toy2,#toy3'), but that doesn't seem very practical or flexible. How can I get this to work with using chaining?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Castel View Post
    I am running into a problem applying a function to multiple elements with the same ID at once.
    Hi There,


    This happens because you are not allowed to use more than one of a unique ID per page. Everytime you use an ID, it should be uniquely represented in your HTML.
    If you want to be able to target multiple elements that are grouped or belong to a group, such as "toy" or "sandbox" then you should give them a class.


    e.g.


    Code:
    <div id="playground">
       <div class="sandbox">
         <div class="toy">Lorem Ipsum</div>
       </div>
       <div class="sandbox">
         <div class="toy">Lorem Ipsum</div>
       </div>
       <div class="sandbox">
         <div class="toy">Lorem Ipsum</div>
       </div>
    </div>
    <div id="control">
      <button class="reset">Reset</button>
      <button class="fontsize">Increase Font</button>
    </div>

    Then you need to change your CSS and JS accordingly as well of course, to make sure you refer to these elements by their class name (e.g. .sandbox and .toy) instead of their ID.


    Quote Originally Posted by Castel View Post
    This only changed the font size for the first #toy div (no console errors).
    The reason only the first one was changing is because when you try to find something with an ID in JavaScript (whether it is with jQuery or vanilla JavaScript), it will stop at the first occurrence of that ID. Once you change to using classes this would solve that part of the problem.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    May 2001
    Location
    Southern Cal
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AussieJohn, thanks for the fix and explanation. Works perfectly now.


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
  •