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

你永远不应该这样做，最佳做法是使用模板引擎或一些服务器端语言。但无论如何，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 2

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

之后你还可以使用另一个按钮将它们转换成手风琴。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您无法在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 4

我不知道你将在哪里使用它，但在JavaScript中你可以这样做：因为你将重复相同的数据使用类。

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

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

4 个答案: