首页 > 其他分享 >前端每行四个解决办法

前端每行四个解决办法

时间:2023-01-24 22:35:06浏览次数:42  
标签:body 解决办法 每行 前端 list replace html let div

success:function(json){

let list=json.data;

let test='<div class="col-md-offset-1 col-md-10"></div>'
for (let i = 0; i <list.length ; i++) {



let html='<div class="col-md-3">\n' +
'<div class="goods-panel">\n' +
'<img src="..#{image}/collect.png" class="img-responsive" />\n' +
'<p>¥#{price}</p>\n' +
'<p class="text-row-3"><a href="product.html?#{pid}"><small>#{title}</small></a></p>\n' +
'<span>\n' +
'<a href="javascript:void(0)" class="btn btn-default btn-xs add-fav"><span class="fa fa-heart-o"></span>加入收藏</a>\n' +
'<a href="cart.html" class="btn btn-default btn-xs add-cart"><span class="fa fa-cart-arrow-down"></span>加入购物车</a>\n' +
'</span>\n' +
'</div>'
html=html.replace(/#{image}/g,list[i].image);
html=html.replace(/#{price}/g,list[i].price);
html=html.replace(/#{title}/g,list[i].title);

if(i%4==0){
$("body > div.container").append(test);
j++;}
console.log(j);
console.log(`body > div.container > div:nth-child(${j})`);

$(`body > div.container > div:nth-child(${j})`).append(html);
}

},
error:function (xhr){
alert("产生未知错误!"+xhr.status)
}

标签:body,解决办法,每行,前端,list,replace,html,let,div
From: https://www.cnblogs.com/elaine-a/p/17066463.html

相关文章

  • 前端基础
    目录前端基础先学习HTTP协议相关的必会知识吧1.HTTP的四大特性2.数据格式3.响应状态码一、网页骨架HTML1.HTML注释语法2.HTML文档结构3.HTML标签分类4.常见符号5.body内基......
  • kaptcha验证码不显示解决办法
    前端Vue+后端Springboot、Mybatis的弱鸡项目不显示具体情况:前后端启动项目都不报错且验证码请求200,但是验证码无法显示后端配置类如下:CorsConfig:packagecom......
  • windows2012无法自动安装VMwareTools的解决办法
    在VMware中装了台windowsserver2012,可能是系统在虚拟化环境里存在问题,无法像win7、win10那样装好后自动安装VMwareTools,没有安装VMwareTools的情况下系统就像没有安装......
  • 必备的Web前端技术有哪些?
    必备的Web前端技术有哪些?需要掌握Web前端开发必备核心技能,在IT行业快速更新迭代的行业,保持不断地学习钻研,才能在前端之路上走得更远。你需要打好HTML、CSS、和JavaScript前......
  • Web前端画布元素的技巧速成
    画布(canvas)是HTML5中新增加的一个非常重要的元素,使用它的API,我们可以通过绘制的方式实现图形、线条和文字的显示。1.   目标使用画布元素,快速绘制一个中小学教学使用的工......
  • Vue变量的数据已更新,但for遍历出的dom元素没有变化的解决办法
    原因如果使用了v-for指令来渲染一组组件,那么每个组件都会被分配一个唯一的key值。当数据源发生变化时,Vue会尝试重用已有组件,而不是重新创建。当dataList元素减少......
  • 笔记本打字延迟缓慢的解决办法
    (41条消息)笔记本打字延迟缓慢的解决办法_高欣的博客的博客-CSDN博客_笔记本打字延迟环境:1、dell笔记本2、Windows10专业版3、微软输入法,搜狗输入法Question:1、打字过......
  • 前端面试题 - javaScript系列
    Time:2023-01-2021:14:37ES6系列1.说说var、let、const之间的区别var、let、const三者区别可以围绕下面五点展开:变量提升暂时性死区块级作用域重复声明修......
  • thymeleaf前端通用格式
    原文地址:https://www.cnblogs.com/DIVEY/p/10213390.html<!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"><head><metahttp-equiv="Content-Type"conten......
  • 前端面试题合集-第一篇
    前端面试题合集-第一篇......