jQuery attribute question

Question

I'm trying to select a series of divs one at a time. I'm sure theres a better way to do this, but I gave them all unique rels and I'm using the rels to select them one at a time. I want to move them over the width of the div, then animate it dropping down the screen. What I have is:

    $(document).ready(function(){
        var totalbricks = 7;
        var index = 2;
        $(".brick").animate({top:"600px"});
        while(index < totalbricks)
        {
            var postion = 45*index;
            $(".brick[rel='+index+']").css('left', postion+'px');
            $(".brick[rel='+index+']").animate({top:"600px"});
            index++;
        }
 });

All the divs are in a container div.
Jquery docs say, 'Variables can be used using the following syntax: [name='" +MyVar+ "']'
What am I doing wrong?

Here is the HTML that is being used by the jQuery

    <body>
<div id="container">
    <div id="canvas">
        <div class="brick" rel="1">
        </div>
        <div class="brick" rel="2">
        </div>
        <div class="brick" rel="3">
        </div>
        <div class="brick" rel="4">
        </div>
        <div class="brick" rel="5">
        </div>
        <div class="brick" rel="6">
        </div>
        <div class="brick" rel="7">
        </div>

    </div>
</div>

</body>

Do you want them all to be animated at the same time, or sequentially? — jason
– jason, Commented Jul 26, 2009 at 22:40
Id like it to be sequential. I was planning on adding a timer in the loop once I got it to animate right to give it a cascading effect. Mark up is as follows: <body> <div id="container"> <div id="canvas"> <div class="brick" rel="1"> </div> <div class="brick" rel="2"> </div> <div class="brick" rel="3"> </div> <div class="brick" rel="4"> </div> <div class="brick" rel="5"> </div> <div class="brick" rel="6"> </div> <div class="brick" rel="7"> </div> </div> </div> </body> — ZapRowsdower910
– ZapRowsdower910, Commented Jul 26, 2009 at 22:47

Nick Berardi · Accepted Answer · 2009-07-27 17:23:18Z

You are mixing ' and " in your JavaScript

    $(document).ready(function(){
            var totalbricks = 7;
            var index = 2;
            $(".brick").animate({top:"600px"});
            while(index < totalbricks)
            {
                    var postion = 45*index;
                    $(".brick[rel="+index+"]").css('left', postion+'px');
                    $(".brick[rel="+index+"]").animate({top:"600px"});
                    index++;
            }
    });

Try that notice that in the .brick[rel= I used double quotes instead of single quotes.

Update

You can also do the following, with the each function, which may make it easier for you

$(document).ready(function() {
    var bricks = $(".bricks");
    bricks.animate({ top: "600px" });

    bricks.find(":not(:first)").each(function(i) {
        var position = 48 * (i + 1);
        $(this).css("left", position + "px");
        $(this).animate({ top: "600px" });
    });
}

This is your same method using a more "jQuery" way of accomplishing the same thing.

c_harm · Accepted Answer · 2009-07-26 22:38:11Z

0

My guess is that you're looking for jQuery's each function. I'll edit this with a code sample if/when you post your markup.

answered Jul 26, 2009 at 22:38

c_harm

Comments

GlenCrawford · Accepted Answer · 2009-07-26 22:40:40Z

0

You're not doing anything wrong, there's just a better way to do it. jQuery provides the each function, which allows you to iterate over all elements that match the inputted selecter.

As luck happens, the example used on the linked page is exactly what you're looking for, just adjust the selecter to your collection of divs. Inside an iteration, the 'this' keyword will represent the DOM element of the current div.

e.g. $("#container_div div").each(...

References: jQuery docs

Edit: there are two functions in jQuery with the name 'each', although I'm no expert, I believe the one you're looking for is the one I linked to.

answered Jul 26, 2009 at 22:40

GlenCrawford

3,3893 gold badges28 silver badges34 bronze badges

Comments

Nick Riggs · Accepted Answer · 2009-07-26 22:49:30Z

0

Along with the .each() that others are suggesting, you might consider using the :gt and :lt selectors for your range. I think you could get rid of the rels and while statement altogether.

$(".brick:lt(8):gt(1)).each(function() {
  //$(this) is your brink
});

answered Jul 26, 2009 at 22:49

Nick Riggs

1,2756 silver badges7 bronze badges

Comments

noboruwatanabe · Accepted Answer · 2009-07-26 22:54:28Z

0

Not sure what you are exactly trying to do in your code...

how about something like this:

jQuery.fn.animateTop = function() {
   return this.each(function() {
      var $this = $(this); <-- this is each one of your bricks
      $this.animate({ top: '600px' });
      ...
   });
};

$(document).ready(function() {
   $('.brick').animateTop();
});

answered Jul 26, 2009 at 22:54

noboruwatanabe

3092 silver badges6 bronze badges

1 Comment

noboruwatanabe Over a year ago

This way you return the jQuery object for so you can chain other stuff... for instance you could do something like this: $('.brick').animateTop().css('border', '1px solid red');

Collectives™ on Stack Overflow

jQuery attribute question

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related