ansaurus

Question

Answer 1

A:

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.

cpharmston 2009-07-26 22:38:11

Answer 2

+5 A:

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.

Nick Berardi 2009-07-26 22:38:38

Answer 3

+1 A:

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.

GlenCrawford 2009-07-26 22:40:40

Answer 4

A:

Posted markup as a comment, doesnt look so hot. Heres a bit more readable version:

    <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>

Thanks for the help guys!

Nick Simone 2009-07-26 22:48:21

Answer 5

A:

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
});

Nick Riggs 2009-07-26 22:49:30

Answer 6

A:

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();
});

noboruwatanabe 2009-07-26 22:54:28

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');

noboruwatanabe 2009-07-26 22:56:53

ansaurus

tags:

views:

answers:

jQuery attribute question

related questions