js如何将数据库返回来的商品每5个放入1个ul里,请教!

异步请求数据库的所有商品,显示到页面上,每个商品我写成一个li,js如何写,可以将返回来的所有数据,每5个li放入到一个ul中?

0

4个回答

没放进去。。。

 $.post("request url", data, function(response) {
  //假设这个返回结果里有个data的数据,里面保存了商品列表
  var appendStr = "<ul>";
  for (var i = 0; i < 23; i++) {
    if (i%5 == 0 && i != 0) {
      appendStr += "</ul><ul>";
    }
    appendStr += "<li>商品内容</li>";
  }

  appendStr += "</ul>";

  console.log(appendStr);
});
2
u010356086
S~ 回复gjfvip123: 用来初始化字符串的,第一次遍历直接添加li
2 年多之前 回复
gjfvip123
gjfvip123 厉害了我的哥,我把判断条件 i != 0删掉也能实现,这个有必要写嘛?
2 年多之前 回复

直接上代码把- -
$.post("request url", data, function(response) {
//假设这个返回结果里有个data的数据,里面保存了商品列表
var appendStr = "

    ";
    for (var i = 0; i < 23; i++) {
    if (i%5 == 0 && i != 0) {
    appendStr += "
    ";
    }
    appendStr += "
  • 商品内容
  • ";
    }

    appendStr += "

";

console.log(appendStr);
});


1

数据返回来应该是个list,循环的时候加判断。每到的时候生成一个ul,然后把生成li并把数据填充进去。异步用ajax,只有动态生成ul和li

0
LD0807
海之沐 回复gjfvip123: 你的ajax数据返回来是个什么格式的?json还是什么?不知道你怎么实现的
2 年多之前 回复
gjfvip123
gjfvip123 循环应该怎么写?
2 年多之前 回复

简短精要一点:

//假如你的data长这样

var data = [{
    'name':'第一个'
},{
    'name':'第二个'
}];

$.ajax({
        //  省略部分内容
    success:function(data){
        var _html = '<ul>';
        for(var i = 0; i < data.length; i++){
            _html += '<li>'+data[i]['name']+'</li>';
        }
        _html += '</ul>';
        //假设你要把这个ul放到#div这个里面
        $('#div').html(_html);
    }
});
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ul,li动态获取数据库数据并输出
首先,前端设置一个label标签,用于放置后台输出的ul,li列表 然后,后台使用StringBuilder类的方法,StringBuilder类在System.Text的命名空间下 using System.Text; 因为是项目,所以数据库的链接在web.config已设置好,无需再进行连接 StringBuilder str = new Strin
DOM操作,给ul下的li添加点击事件
当有一个ul,下面有100个以上的li,给每一个li添加点击事件是非常耗性能的,解决方案:事件委托,委托给上级ul,代码如下document.addEventListener('DOMContentLoaded', function() { let app = document.getElementById('todo-app'); // 事件侦听器绑定到...
将json中的数据加载到table和ul中
将json文件中的数据加载到table和ul中,代码如下
js实现添加、删除ul行
HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>任务一</title> <link rel="stylesheet" href="main.css"></head> <body> <p id="top">支付宝信息</p> <input id="inputInfo" typ
js怎么把几个li标签按顺序添加进一个div中?
1.js怎么把几个li标签按顺序添加进一个div中?这种问题一般出现在前端请求数据之后,后端以数组的形式返回给前端,然后前端对这些数组进行处理。(1)首先是对后端返回的数据进行拆分,分别得到你想要得到的数据,就比如后台返回数据的id,name,type,status等;即可令:var datas = response.data; var length = datas.length;(2)然后开始遍...
从一个数组循环每次拿五个出来放到另外一个数组
代码一: public static void main(String args[]) { String[] voucher = {&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;, &quot;g&quot;, &quot;h&quot;, &quot;i&quot;, &quot;j&quot;, &quot;k&quot;, &quot;l&quot;, &quo
如何效率的向一个ul里面添加10000个li
方法一:文档碎片 &amp;lt;body&amp;gt; &amp;lt;ul&amp;gt;&amp;lt;/ul&amp;gt; &amp;lt;script&amp;gt; var oUl = document.getElementsByTagName('ul')[0]; var oFrag = document.createDocumentFragment(); for (var i = 0; i &amp;lt; 10000; i++) { ...
jquery往一个div标签内添加多个li标签的几种常规方法
1。先拼接好多个li标签的字符串,一次性赋值,用$("#div").html("拼接好的字符串如12") 2。用$("#div")调用append方法,每次拼接一个jquery对象       $("#div").append($("1")) 3。通过取html再拼接字符串最后重新赋值给div的方法进行拼接处理:如下       $("#div").html($("#div").html(
概率题 数学 智力
1 2015年年初,某公司部门举行年会,期间有个游戏,规则是通过猜拳的方法决出每一局的胜负(一人赢其他所有人才算赢得本局,出现平局就继续猜拳),如果谁先赢满7局,则获胜,并赢得全部奖金。现在有3名员工甲、乙、丙参与了这个游戏,游戏进行了一会,分数为甲6,乙5,丙4,但时间已晚,大家要吃饭了。最公平的奖金分配方案是____。 简化一下问题:甲、乙、丙3人参与游戏,每轮每人获胜概率为1/3,
js如何选中ul 下的li 的第一个
$(&quot;input[name=Fruit]:eq(0)&quot;).attr(&quot;checked&quot;,true);  以下标开头
求答案 ? 一筐鸡蛋: 1个1个拿,正好拿完。 2个2个拿,还剩1个。 3个3个拿,正好拿完。 4个4个拿,还剩1个。 5个5个拿,还差1个。 6个6个拿,还剩3个。 7个7个拿,还剩4个。 8个8个
别人分享个题目给我,如下。 求答案 ? 一筐鸡蛋: 1个1个拿,正好拿完。 2个2个拿,还剩1个。 3个3个拿,正好拿完。 4个4个拿,还剩1个。 5个5个拿,还差1个。 6个6个拿,还剩3个。 7个7个拿,还剩4个。 8个8个拿,还剩1个。 9个9个拿,正好拿完。 问筐里最少有多少鸡蛋? private static void testResult()
使用 MySQLdb 从数据库拉回数据,并将数据存入 python的DataFrame中
MySQLdb是python用于连接数据库的三方库,DataFrame是用于存数据的类型,每个DataFrame相当于一张二维的数据表。 # -*- coding: utf-8 -*- #这是一个使用Python连接数据库并把数据放入DataFrame的方法 import MySQLdb import pandas as pd from pandas import DataFrame db
JS 从一个length为n的数组中按顺序取每5个元素为一组放到新数组中,最后不够5个的也存为一个数组
var spArray = function(N,Q) { var R = [],F; for (F = 0;F &amp;lt; Q.length;) { R.push(Q.slice(F,F += N)) } return R } var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]; console.log(s...
Jquery和JS获取ul中li标签的值以及赋值问题
通过点击li标签,拿到li值,在把值赋给一个文本框 以下是HTML,以及input标签<input type="hidden" id="orderBy" value="${orderBy}" > <input type="hidden" id="orderColumn " value="${orderColumn }" > <ul class="orderType" > <li va
怎样存储layui模板引擎后台返回的数据,在需要的时候获取
       在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据。在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展示出来;一种是layui模板引擎进行数据渲染。        但是这种渲染方式在渲染完成之后不能获得后台返回的完整的数据,暂时相处一种解决办法:将返回值作为一个对象用JSON.stri...
如何将一个表格的所有数据存到数据库的一个字段里,并如何将这一个数据字段里的数据填充到前端表格里
表格图:html:&amp;lt;table&amp;gt; &amp;lt;tr class=&quot;trClass&quot;&amp;gt; &amp;lt;td class=&quot;&quot;&amp;gt;&amp;lt;input type=&quot;text&quot; value=&quot;1&quot; style=&quot;width:20px;&quot; /&amp;gt;&amp;l
html中动态向ul或者ol中添加li元素
无标题文档                 function addt(){ //获取文本输入框中的内容 var text1=document.getElementById("t").value; //获取到Ul列表 var ul=document.getElementById("u"); //创建元素Li var li=document.createElement("li");
从数据库动态添加数据到下拉框(select)中
在controller中: @RequestMapping("/type") public String getType(HttpServletRequest req, HttpServletResponse rsp) throws IOException { req.setCharacterEncoding("utf-8"); rsp.setCharacterEncoding("utf
如何用js将一个input的值放到另一个input里
用 $("#id").attr("value","你想要赋的值") 然后,有两个注意点 1.要引入jquery.js文件 2.$("#id").attr("value","你想要赋的值")要在html加载完成之后 $(function(){ $("#id").attr("value","你想要赋的值"); // do some thing... }); ...
在 JS 中定义一个数组转存从 AJAX 中传回的数组数据
当定义一个属性 var  ss = { } 时,意思是在定义数组。 可以通过在 ajax 返回成功方法写 ss[data.rows[i].imId]=data.rows[i] 的方法转存ajax传递回来的数组值。(是在for循环中使用)...
js 如何id为xx的div中包含的ul中的符合条件的li元素
需求:首页左侧有导航栏,点击导航栏,会出现一个div,div中有很多可以跳转的页面,但是有的div需要添加一个滚轮,所以需要找到这个div,然后添加一个特殊的类名 重点代码就是: var div=document.getElementById(“nav_sub”); var uls=div.getElementsByTagName(“ul”); var lis=ul...
ul-li点击将对应li值输入到输入框中
&amp;lt;div class=&quot;&quot;&amp;gt;             &amp;lt;input type=&quot;text&quot; id=&quot;inpt&quot; onfocus=&quot;document.getElementById('ulList').style.display = 'block'&quot; /&amp;gt;             &amp;lt;ul id=&quot;ulList&quot; style=&quot;disp
第二篇 应用elasticsearch进行简单的商品管理
一、集群健康检查和文档CRUD1. 快速查询集群的健康状况GET /_cat/health?v 了解集群的健康状况 green:每个索引的primary shard和replica shard都是active状态的。 yellow:每个索引的primary shard都是active状态的,但是部分replica shard不是active状态,处于不可用的状态 red:不是所有索引的pri
将商品添加到购物车
CartServlet: package bull03.Cart; import java.io.IOException; import java.io.PrintWriter; import java.util.LinkedHashMap; import java.util.Map; import javax.servlet.ServletException; import javax.s...
listview滑动保存选中状态
listview向下或者向上滑动后,返回来,item里面的checkbox选中状态不改变
JavaScript动态加载ul标签
网上也查了很多关于JavaScript动态加载ul标签的文章,但是感觉不是很全,自己边查边琢磨着代码,给我蒙对了。看看吧! 我想实现的功能很简单,就是查到数据库有数据,就在前台显示标签,有几条数据,显示几个标签。 那么开始了: 首先默认数据库是没有数据的,那么就默认显示无到期的任务。 暂无今天内到期的任务
js对div,li,ul的基本操作
原先的div 选择下一节点处理人 完成 显示的内容 js对div的操作 function changeGroup(){ var content = $("#mui-table-view").children("li");//获得id为mui-table-vie的ul的下面的li //获取value属性的值 var
将数据库中查询出来的数据放入cache中的类
将数据库中查询出来的数据放入cache中存储,以便下一次拿出来。
使用ul li 开发轮播图
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;$(function() {        var sWidth = $(&quot;#focus ul li&quot;).width(); //获取焦点图的宽度(显示面积)    var len = $(&quot;#focus ul li&quot;).length; //获取焦点图个数    var index = 0;    var picTimer; ...
JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容
这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法: 方法一: var itemli = document.getElementsByTagName(&quot;li&quot;); for(var i = 0; i&amp;lt;itemli.length; i++){     itemli[i].index = i; //给每个li定义一个属性索引值     itemli...
js循环遍历ul中li的点击事件,给给选中li添加css
功能:对于一个ul中固定的li个数,当点击其中一个li时,改变选中li的颜色;同时改变对应的另一个ul中li的颜色页面初始化的界面:HTML: &amp;lt;div &amp;gt; &amp;lt;label&amp;gt;其他推荐:&amp;lt;/label&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li c...
ul中清除所有的li标签
1.首先引入jquery.js.$(&quot;#banqis&quot;).find(&quot;li&quot;).remove();  var banqifragment = document.getElementById(&quot;banqis&quot;);//定位到容器ul标签  alert(&quot;=清空版期图片数据=&quot;); alert(&quot;清空后==&quot;+banqifragment.innerHTML);...
JS.页面中有一个ul列表,共有10个li标签,为每个列表项添加随机的背景色;页面中还有一个按钮,点击按钮,为每一个li更换随机的背景色。
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;zh-CN&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; li{ width: 300px; height: 30px; }
Map集合如何将value放入list中
在使用Map集合时,有时需要放入list,代码如下: List outList = new ArrayList(); Iterator it = prodRelGroupMap.keySet().iterator(); while (it.hasNext()) { String key = it.next(); System.out.println("----key-----" +
怎样将数据库的数据读取到JTable中?
默认之前已经连接数据库,我这个是书籍信息读取。 第一步:先获取数据信息,就相当于用SQL语言获取信息。 第二步:将获取的数据通过循环进行输出到在容器里的表格中,前提是先定义出JTable,在容器中显示表格。   public Object[][] allBook(BookInfo book){ Object [][] ob=new Object[60][9]; int n=0; ...
html中动态向ul中添加li元素
PS→无奈:有志者自有千计万计,无志者只感千难万难。  html模板如下: javascript模板如下:
ul 下添加li标签模板后 第一个li前面有一个undefined(问题记录)
1 话不多说 直接上图  不知道哦啊大家碰到过这种情况没有 将li的模板添加到ul 下面时出现了一个undefined  无缘无故出现的有木有(如下图)2 让我们看看相关代码(下图) render函数 和tpl 函数 tpl函数看是没有问题的  但是为什么tpl添加上去就会有undefined了 那就只剩下render函数了 但是就这么几行,问题在哪呢? 3 问题就在 var  html   声明...
一个asp封装的购物车
一个asp封装的购物车,里面的代码是将商品放入购物车,包括添加商品、修改商品、删除商品等,但是后期提交数据库需要自己写。
ul里的多个li强制一行显示
Brief summary: 很多轮播图等类似场景都会像这样,给ul设置white-space:nowrap,li设置display:inline-block;
购物车系统
购物车系统 增、删、改、查 添加购物车业务逻辑: 在购物车系统创建一个拦截器,来判断当前用户有没有登录,不管登录不登录,都要能够使用购物车。这里的拦截并不是用来拦截请求,而是判断用户有没有登录,并把登录用户信息存入request中。 拦截器: 1. 从Cookie中取token 2. 如果没有取到token,未登录状态,直接放行 3. 如果取到token,需要调用sso系统的服务,根...