使用 for 循环创建多个 div 元素

Question

我正在尝试使用 for 循环制作多个 div，我尝试了下面的代码，但它不起作用。我正在使用手风琴菜单，我想使每个 div 使用 for 循环。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>

<script> 
for(var i=0 ; i<3 ; i++){
<div id="accordion" style="width:50%">

  <h3>Section i</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>

</div>
}
</script> 

</body>
</html>

Answer 1

您不能在 HTML 中使用该重复功能。您要么使用 php 之类的语言，要么复制粘贴您的 HTML。在那种情况下，您不能复制 ID。所以你最好使用 class.

<div class="accordion" style="width:50%">

  <h3>Section i</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>

</div>
<div class="accordion" style="width:50%">

  <h3>Section i</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>

</div>
<div class="accordion" style="width:50%">

  <h3>Section i</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>

</div>

而javascript是：

<script>
  $(function() {
    $( ".accordion" ).accordion();
  });
  </script>

Answer 2

你不应该这样做，最好的做法是为此使用模板引擎或一些服务器端语言。但无论如何，这个 JS 解决方案可能对你有用。

<div id="accordion" style="width:50%"></div>
<script>
var html = '';
var text = 'Lorem ipsum dolor sit amet ..';
// first we generating our html in the loop
for(var i=0 ; i<3 ; i++) {
  html += '<div><h3>Section ' + i + '</h3>';
  html += '<p>' + text + '</p></div>';
}
// next we're inserting html into block with ID accordion
document.getElementById("accordion").innerHTML = html;
</script>

Answer 3

我不知道你会在哪里使用它，但在 JavaScript 你可以这样做 this:since 你将重复相同的数据使用 class 代替。

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
      str="";
      for(var i=0 ; i<3 ; i++){
      str=str+'<div class="accordion" style="width:50%"> <h3>Section i</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit</p> </div></div>';
      }
      $('body').html(str);
    $( ".accordion" ).accordion();
  });
  </script>
</head><body> 
</body>
</html>

Answer 4

jQuery 以这种方式非常简单（我的意思是在解释时动态生成 HTML）。

之后你还可以有另一个按钮将它们变成手风琴。

$('#foo').click(generate);

function generate() {
  for (var i = 0; i < 5; i += 1) {
    $('<div></div>')
      .text('Div no ' + i)
      .addClass('some-class')
      .appendTo('#container');
  }
}

.some-class{
  padding: 5px;
  border: 1px solid greenyellow;
  border-radius: 3px;
  margin: 2px;
  font-family: Calibri;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Generate HTML</button>

<div id="container"></div>

使用 for 循环创建多个 div 元素

Creating multiple div elements using for-loop

html

javascript

jquery

accordion