草庐IT

javascript - 每次循环递增3后关闭再打开另一个div

coder 2023-08-09 原文

我有一个数组。我正在循环。首先，我需要的是，当循环第一次运行时，它应该已经打开一个 div 并向其中添加文本。接下来我希望如果循环运行了 3 次则关闭前一个 div 并打开一个新的 div。

代码:

var counter = 0;
for (var i = 0; i < tag_array.length; i++) {
    counter++;
    if (counter == 3) {
        counter = 0;
        document.write("</div>");
        document.write("<div class='span6'>");
    } else {
        document.write("<div class='span6'>");
    }
    document.write("<div class='tag'>" + toTitleCase(tag_array[i]) + "</div>");
}

以上代码无效。我不知道为什么。请解释我做错了什么，我该如何解决？

最佳答案

when the loop is run first it should already open up a div and add text to it. Next I want that if a loop has run 3 times then close the previous div and open a new div.

你做错的原因是因为else { document.write("<div class='span6'>");}会导致document.write即使计数器为 2。

所以你应该把它改成else if(counter == 1) :

var counter = 0;
for (var i = 0; i < tag_array.length; i++) {
    //this line indicates that the counter will only be either 1,2,3 when it enters the if statement
    counter++;
    if(counter == 3){
        counter = 0;
        document.write("</div>");
    }else if(counter == 1){
        document.write("<div class='span6'>");
    }
    document.write("<div class='tag'>" + toTitleCase(tag_array[i]) + "</div>");
}

为了让它看起来不那么困惑，您可以将 if 语句更改为 switch 语句，有 counter++;在 switch 语句中，将 for 语句变成 while 语句:

var counter = 0;
var i = 0;
var length = tag_array.length;
while (i <length) {
    switch(counter){
        case 2:
        document.write("</div>");
        //when counter reaches 2, set it back to 0 and leave the switch statement;
        counter = 0;
        break;
        case 0:
        document.write("<div class='span6'>");
        case 1:
        //counter++ will only be triggered when counter is 1 or 0;
        counter++;
    }
    document.write("<div class='tag'>" + toTitleCase(tag_array[i]) + "</div>");
    i++;
}

或者，如果您想提高效率，可以使用以下代码。 (受到 frenchie's answer 的启发。我将他的答案更正为一个正常工作的答案。如果你因为下面的代码而想投票或接受这个答案，请投票或接受 his 而不是。)

var a = '<div class="span6">';

var length = tag_array.length;

for (var i = 0; i < length; i++) {


  a += '<div class="tag">' + toTitleCase(tag_array[i]) + '</div>';

 if (i % 3 == 2) {

      a += '</div><div class="span6">';
  }

}

a += '</div>';

document.write(a);

关于javascript - 每次循环递增3后关闭再打开另一个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19071327/

javascriptdivcounterdocumentcsshtml

有关javascript - 每次循环递增3后关闭再打开另一个div的更多相关文章

  1. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  5. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  6. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  7. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  8. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  9. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案

  10. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

随机推荐