Question

我正在尝试一次选择一系列div。我确信这是一个更好的方法，但我给了他们所有独特的rels，我正在使用rels一次选择一个。我想将它们移动到div的宽度上，然后在屏幕上放下动画。我所拥有的是：

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

所有div都在容器div中 Jquery文档说，'变量可以使用以下语法使用：[name ='“+ MyVar +”']'
我做错了什么？

这是jQuery使用的HTML

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

Answer 1

您正在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++;
            }
    });

请注意，.brick[rel=我使用的是双引号而不是单引号。

<小时/> 的更新

您还可以使用each功能执行以下操作，这可能会让您更轻松

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

这是使用更“jQuery”方式完成同样事情的相同方法。

Answer 2

我的猜测是你正在寻找jQuery's each function。如果/当您发布标记时，我将使用代码示例对此进行编辑。

Answer 3

你没有做错任何事，只有更好的方法。 jQuery提供了每个函数，允许您迭代与输入的选择符匹配的所有元素。

幸运的是，链接页面上使用的示例正是您正在寻找的，只需将选择器调整到您的div集合即可。在迭代中，'this'关键字将表示当前div的DOM元素。

e.g。 $（“＃container_div div”）。each（...

<强>参考文献： jQuery docs

编辑： jQuery中有两个名为'each'的函数，虽然我不是专家，但我相信你要找的是我链接的那个。

Answer 4

除了其他人建议的.each（）之外，您可以考虑使用：gt和：lt选择器作为您的范围。我认为你可以完全摆脱rels和while声明。

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

Answer 5

不确定您在代码中正在尝试做什么......

这样的事情怎么样：

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

jQuery属性问题

5 个答案: