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

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

javascript jquery html

Javascript 使用for循环创建多个div元素,javascript,jquery,html,accordion,Javascript,Jquery,Html,Accordion,我正在尝试使用for循环生成多个div，我已经尝试了下面的代码，但它不起作用。我使用的是手风琴菜单，我想让每个div都使用for循环 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title> <link rel="style

我正在尝试使用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>


jQuery UI Accordion-默认功能
$（函数（）{
$（“#手风琴”）。手风琴（）；
});
对于（var i=0；i您不能在HTML中使用repeat函数。您可以使用类似php的语言或复制粘贴复制HTML。在这种情况下，您不能复制ID。因此，您最好使用类
<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>


第一节

莫里斯·莫里斯·安特、布兰迪·埃特、特莱斯a、苏西比特·埃特、夸姆·整数
但不可以。胎膜早破，胎膜早破，孕妇早破，调味品早破
阿梅特，努克。纳姆·尼布。多奈克·苏西比特·厄罗斯。纳姆·米。维韦拉·利奥·尤特
奥迪奥。马勒苏阿达库拉比图。前庭是一个圆滑的前庭。

第一节

莫里斯·莫里斯·安特、布兰迪·埃特、特莱斯a、苏西比特·埃特、夸姆·整数
但不可以。胎膜早破，胎膜早破，孕妇早破，调味品早破
阿梅特，努克。纳姆·尼布。多奈克·苏西比特·厄罗斯。纳姆·米。维韦拉·利奥·尤特
奥迪奥。马勒苏阿达库拉比图。前庭是一个圆滑的前庭。

第一节

莫里斯·莫里斯·安特、布兰迪·埃特、特莱斯a、苏西比特·埃特、夸姆·整数
但不可以。胎膜早破，胎膜早破，孕妇早破，调味品早破
阿梅特，努克。纳姆·尼布。多奈克·苏西比特·厄罗斯。纳姆·米。维韦拉·利奥·尤特
奥迪奥。马勒苏阿达库拉比图。前庭是一个圆滑的前庭。


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


$（函数（）{
$（“.accordion”）.accordion（）；
});
您永远不应该这样做，最好的做法是使用模板引擎或一些服务器端语言。但是无论如何，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> 


var html=''；
变量文本='Lorem ipsum dolor sit amet.'；
//首先，我们在循环中生成html
对于（var i=0；i我不知道您将在何处使用它，但在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>


jQuery UI Accordion-默认功能
$（函数（）{
str=“”；
对于（var i=0；ijQuery）来说，这种方式非常简单（我指的是在解释时动态生成HTML）
之后，您还可以使用另一个按钮将其转换为手风琴

$（'foo'）。单击（生成）；
函数生成（）{
对于（变量i=0；i<5；i+=1）{
$('')
.text（'Div no'+i）
.addClass（'some-class'）
.appendTo（“#container”）；
}
}
。一些类{
填充物：5px；
边框：1px实心绿黄色；
边界半径：3px；
保证金：2倍；
字体系列：Calibri；
}

生成HTML
看起来你可能会使用一个模板，或者认为你是-也许是一厢情愿？你可能需要看看Clonew这是什么“原因”函数？HTML没有函数。为什么不动态创建HTML？OP希望通过JavaScript动态生成HTML，而您的答案没有提到。您的答案对我帮助很大，但当我复制您的代码时，它并不是我想要的。我对它进行了修改，它成功了。var HTML=''；var text='Lorem ipsum dolor sit amet..'；对于（变量i=0；i