Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery:从逗号分隔的字符串创建html元素?

jQuery:从逗号分隔的字符串创建html元素?
EN

Stack Overflow用户
提问于 2016-06-16 01:02:31
回答 6查看 1.7K关注 0票数 0

我正在尝试使用jQuery从逗号分隔的字符串创建HTML元素(Div)。

假设我有一个字符串,看起来如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
options ="some texts, another text, some more text";

我需要创造这样的东西:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div>some texts</div>
<div>another text</div>
<div>some more text</div>

我首先拆分逗号分隔的字符串如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var str = options;
var temp = new Array();
temp = str.split(", ");

然后我需要在这个函数之后创建div,我不知道怎么做。

有人能给我个建议吗?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2016-06-16 01:04:51

试试这个:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var options ="some texts, another text, some more text";
var temp = options.split(", "); // first split string and convert it to array
var str = '';
$.each(temp, function(i,v) { // loop through array
  str += "<div>"+v+"</div>"; // create html string and store it in str variable
});
$("body").append(str);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

票数 4
EN

Stack Overflow用户

发布于 2016-06-16 01:05:26

您可以使用jQuery进行类似的操作。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var options = "some texts, another text, some more text";
var temp = options.split(", ");

// iterate and generate array of jQuery elements
var divs = temp.map(function(txt) {
  // generate div using jQuery with text content as array element
  return $('<div/>', {
    text: txt
  })
})

// update html content, use `append()` if you want to append instead of replacing entire content
$('body').html(divs);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

票数 1
EN

Stack Overflow用户

发布于 2016-06-16 01:09:07

您不需要转换为数组--只需将逗号和相关空格替换为结束div和开始div标记,然后添加一个开头的开始和结束一个结束的空格,就可以得到html结构。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var options ="some texts, another text, some more text";
var temp = "<div>" + options.replace(/, /g,"</div><div>") + "</div>; 
   //this will give: <div>some texts</div><div>another text</div><div>some more text</div>

$("body").append(temp);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37854554

复制
相关文章
Java的Set转成逗号分隔的字符串
package com.javaedge.collection.set; import org.apache.commons.lang.StringUtils; import java.util.HashSet; import java.util.Set; /** * Set转逗号分隔字符串 * * @author JavaEdge * @date 2021/10/8 */ public class Set2String { public static void main(Stri
JavaEdge
2021/12/07
3.1K0
java里面逗号分隔的字符串转list
目录 逗号分隔的字符串转list 逗号分隔的字符串转list //逗号分隔的字符串转list public static List<String> getListStr(String str) { String[] strs = str.split(","); return Arrays.asList(strs); }
一写代码就开心
2022/05/09
2.5K0
LINQ to XML 从逗号分隔值 (CSV) 文件生成 XML 文件
参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx
跟着阿笨一起玩NET
2018/09/19
2.6K0
java中字符串以逗号分隔的转换为List方法
List<String> split= Arrays.asList(str.split(","));
IT工作者
2022/05/05
7.1K0
php 字符串打散为数组,用逗号分隔出数组
使用explode可以将一段字符串打散成一个数组,不过,explode使用某个字符打乱,例如以上例子,我在explode圆括号内第一个参数是空格,第二个参数为我们将要打乱的字符串,那么连起来的意思就是把$str字符串通过空格打散成字符。
1_bit
2020/10/23
2.2K0
JQuery 隐藏和显示html元素
$(function(){ $("#bubmitBtn").click(function(){ //首先需要把提示标签全部隐藏掉 $("#nameInvalid").hide(); $("#emailInvalid").hide(); $("#pwdInvalid1").hide(); $("#pwdInvalid2").hide(); //检查用户名: 长度为6到12位, 只能输入数字和英文和下划线 //alert("--"); var $nameEle = $("#UcenterMember_account"); var reg = /^\w{6,12}$/; if(!reg.test($nameEle.val())) { $("#nameInvalid").text(" *用户名长度为6到12位, 只能输入数字和英文和下划线"); $("#nameInvalid").show(); //alert("用户名长度为6到12位, 只能输入数字和英文和下划线"); $nameEle[0].focus(); return false; } //邮箱格式必须正确, 可以不输入 var $emailEle = $("#UcenterMember_email"); reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if($emailEle.val()!="" && !reg.test($emailEle.val())) { $emailEle[0].focus(); $("#emailInvalid").text(" *邮箱格式不正确!"); $("#emailInvalid").show(); //alert("邮箱格式不正确!"); return false; } //检查密码: 长度为6位, 只能输入数字和英文 var $passwordEle = $("#UcenterMember_password1"); reg = /^[a-zA-Z0-9]{6,15}$/; if(!reg.test($passwordEle.val())) { $("#pwdInvalid1").text(" *密码的最低长度为6位, 只能输入数字和英文"); $("#pwdInvalid1").show(); //alert("密码的长度为6位, 只能输入数字和英文"); $passwordEle[0].focus(); return false; } //确认密码必须与密码相同 var $password2Ele= $("#UcenterMember_password2"); if($password2Ele.val()!=$passwordEle.val()) { $password2Ele[0].focus(); $("#pwdInvalid2").text(" *确认密码必须与密码相同"); $("#pwdInvalid2").show(); //alert("确认密码必须与密码相同"); } return true; }); });
wust小吴
2019/07/05
9.3K0
Js数字千分位逗号分隔
console.log(change(12345.67)) function change(num) { var str = num.toString() v
明知山
2021/04/07
5.7K0
CSV逗号分隔值格式文件(示例分析)
CSV全称Comma Separated Values是"逗号分隔值"的英文缩写.通常是纯文本文件,可以被文本编辑软件,Excel或WPS表格打开. 基本规则 开头不留空,以行为单位; 列名(标题)放在第一行(可忽略不加列名); 每一行数据以换行结束,无空行; 以半角逗号作分隔符,列为空也要表达其存在; 列内容如存在半角逗号则用半角引号("")将该字段值包含起来; 列内容如存在半角引号则需要使用半角双引号("")转义,并用半角引号("")将该字段值包含起来; 文件读写时引号,逗号操作规则互逆; 内码格式不限
Qt君
2019/07/15
3.5K0
字符串分隔
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
喜欢ctrl的cxk
2019/11/08
7330
Mysql 取用逗号分隔的字串的子串的方法:SUBSTRING_INDEX
有一张部门表:appbricks_department ,有 id 字段和 rank_tree 字段。
微风-- 轻许--
2022/04/13
2K0
Mysql 取用逗号分隔的字串的子串的方法:SUBSTRING_INDEX
Hive之导出文件按逗号分隔到本地文件
    如下所示,默认导出的是用\t分隔的,需要使用管道符进行转换,经常使用到,记录下.
克虏伯
2020/02/14
2.3K0
MySQL查询某个表中的所有字段并通过逗号分隔连接
想多造一些测试数据,表中字段又多一个个敲很麻烦,导出表中部分字段数据又不想导出ID字段(因为ID字段是自增的,导出后再插入会报唯一性错误),select * 查出来又是所有的字段。 可以通过如下SQL查询表中所有字段通过逗号连接,然后复制出来进行select查询再导出
共饮一杯无
2022/11/24
9.5K0
MySQL查询某个表中的所有字段并通过逗号分隔连接
SQL SERVER使用STUFF函数拼接记录为逗号分隔符
注意:本文内容太多,公众号有字数限制,全文可点击文末的阅读原文,谢谢大家的理解。Oracle培训和认证记得找小麦苗哟。
AiDBA宝典
2019/09/30
3.8K0
SQL SERVER使用STUFF函数拼接记录为逗号分隔符
jquery 元素节点操作 - 创建节点、插入节点、删除节点
前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。
Devops海洋的渔夫
2019/05/31
9K0
jQuery 元素操作
jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。
星辰_大海
2020/10/09
2.6K0
jQuery 元素操作
使用jQuery的.on方法解决ajax增加的html元素获取不到的问题
下班之前终于搞定了使用$.ajax增加的动态元素获取不到的问题,原来是使用.on方法(老版本是.live),这里记录一下,顺便赞一下jQuery,通过使用getJSON,.append,.empty等,这个东东太方便了。唯一的一点就是版本太多了,最新版本支持的浏览器对于中国用户来说是个噩梦。
崔文远TroyCui
2019/02/26
1.8K0
jquery 元素尺寸
从上面的示例可以看到,使用width()和height()分别可以获取元素div的width和height的值。
Devops海洋的渔夫
2019/06/02
1.6K0
HTML元素
注意:一些 HTML 元素没有内容(如 <br> 元素)。这些元素称为空元素。空元素没有结束标签!
玖柒的小窝
2021/09/24
1.3K0
jQuery 元素操作
​ jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。
梨涡浅笑
2022/05/08
1.9K0
jQuery 元素操作
jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。
清出于兰
2020/10/26
1.3K0
jQuery 元素操作

相似问题

从逗号分隔的字符串javascript创建html表

50

jQuery:如何从逗号分隔的字符串创建索引数组

13

使用jquery创建以逗号分隔的单击元素列表

20

从字符串创建逗号分隔的参数

10

从逗号分隔的字符串创建列表

118
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文