在jquery中使用for循环添加HTML代码 [英] Adding HTML code using for loop in jquery

问题描述

放置要素的元素
$ b

 < div class =form-b​​odyid =nitspopupmenu>< / p> DIV> 
  

ul元素：

 < div class =collapse navbar-collapse> 
< ul class =nav navbar-nav navbar-rightid =nitsmenudata-nitspagelabel =1> 
< li class =scroll active>< a href =＃navigation>主页< / a>< / li> 
< li class =scroll>< a href =＃aboutus>关于我们< / a>< / li> 
< li class =scroll>< a href =＃services>服务< / a>< / li> 
< li class =scroll>< a href =＃ourteam>我们的团队< / a>< / li> 
< li class =scroll>< a href =＃portfolio>投资组合< / a>< / li> 
< li class =scroll>< a href =＃clients>客户< / a>< / li> 
< li class =scroll>< a href =＃blog>博客< / a>< / li> 
< li class =scroll>< a href =＃contact>联络< / a>< / li> 
< / ul> 
< / div> 
  

我的jquery代码：

  $（e）.fadeIn（400）; 
 
 $（'＃nitspagesorter'）。fadeIn（400）.css（{
'top'：mouseY，
'left'：mouseX 
}）。可拖动（）; 
 
 $（'＃nitsmenubutton'）。hide（）; 
 
 var licount = $（＃nitsmenu li）。length; 
 for（i = 0; i< licount; i ++）{
 var lielem = $（＃nitsmenu li）。text（）; 
 var element = $（lielem）.text（）; 
 $（＃nitspopupmenu）。html（< div class ='form-group'>< div class ='pagesmenu selected'>< span>< i class ='fa fa -bars'>< / i>+ lielem +）; 
} 
  

我弹出内容到弹出框， li 名称正确，但它只显示最后一个元素，即Contact，
$（＃nitspopupmenu）。html（< div class ='form-group'>< div class ='pagesmenu selected'>< span>< i class ='fa fa-bars'>< / i>+ lielem +）; 正在执行，或者可能每次都会替换内容并显示最后的结果

请帮助

append（）来覆盖 html（） var lielem = $（$ c
$ b pre $ #nitsmenu li）。text（）;
var element = $（lielem）.text（）;
$（＃nitspopupmenu）。append（< div class ='form-group'>< div class ='pagesmenu selected'>< span>< i class ='fa fa -bars'>< / i>+ lielem +）;





$ b你应该把所有字符串放在一行中，如果需要多行，那么concat与+符号

I'm trying to add li elements in a html codes to a div element, following is my html code:

Place where the elements to be added:

<div class="form-body" id="nitspopupmenu"></div>

Elements of ul:

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right" id="nitsmenu" data-nitspagelabel="1">
        <li class="scroll active"><a href="#navigation">Home</a></li>
        <li class="scroll"><a href="#aboutus">About Us</a></li>
        <li class="scroll"><a href="#services">Services</a></li>
        <li class="scroll"><a href="#ourteam">Our Team</a></li>
        <li class="scroll"><a href="#portfolio">Portfolio</a></li>
        <li class="scroll"><a href="#clients">Clients</a></li>
        <li class="scroll"><a href="#blog">Blog</a></li>
        <li class="scroll"><a href="#contact">Contact</a></li>
    </ul>
</div>

My Jquery code:

$(e).fadeIn(400);

$('#nitspagesorter').fadeIn(400).css({
    'top': mouseY,
    'left': mouseX
}).draggable();

$('#nitsmenubutton').hide();

var licount = $("#nitsmenu li").length;
for (i = 0; i < licount; i++) {
    var lielem = $("#nitsmenu li").text();
    var element = $(lielem).text();
    $("#nitspopupmenu").html("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + "");
}

I'm poping up the content to popup box, I'm getting the li name properly but its showing only the last element i.e. Contact, $("#nitspopupmenu").html("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + ""); is executing at last or might be replacing the content everytime and showing the last result

Please help

解决方案

I think you should use append() over html()

for (i = 0; i < licount; i++) {
    var lielem = $("#nitsmenu li").text();
    var element = $(lielem).text();
    $("#nitspopupmenu").append("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + "");
}

You should put all string with in one line, if multiple lines required then concat with + sign

这篇关于在jquery中使用for循环添加HTML代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！