Question

我正在尝试使用jQuery从逗号分隔的字符串创建HTML元素（div）。

假设我有一个看起来像这样的字符串：

options ="some texts, another text, some more text";

我需要创建这样的东西：

<div>some texts</div>
<div>another text</div>
<div>some more text</div>

我首先将逗号分隔的字符串拆分为：

var str = options;
var temp = new Array();
temp = str.split(", ");

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

有人可以就此提出建议吗？

Answer 1

试试这个：

＆＃13;

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);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

＆＃13;

Answer 2

你可以使用jQuery做这样的事情

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

你不需要转换为一个数组 - 只需用一个结束div和打开div标签替换逗号和相关空格，然后添加一个开头一个开始，一个结束一个结束，你有html结构

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);

Answer 4

var str = options;
var temp = str.split(", ").map(function(strOption) {
   return '<div>' + strOption + '</div>';
}).join('');
myHTMLElement.innerHTML = $(temp);

Answer 5

假设您希望将文本解释为文本，而不是HTML，那么您希望遍历代码为您提供的数组并单独创建元素，如下所示：

＆＃13;

var options = "some texts, <another> text, some more text";
options.split(", ").forEach(function(opt) {
  $("<div>").text(opt).appendTo(document.body);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

请注意，我更改了其中一个条目，以证明确保将其视为文字而非HTML的重要性。

关于您的代码：

var str = options;
var temp = new Array();
temp = str.split(", ");

在那里完全没有必要调用new Array()，因为您在下一行覆盖了temp变量的值。 split返回一个数组，它不会填充一个神奇地伸出的数组，并从赋值的左侧进行抓取。 :-)（还没有理由var str = options;直接使用options。）

Answer 6

试试这个：

 <div id="main-div"></div>
 <script type = "text/javascript"> 
     var options ="some texts, another text, some more text";
     options.split(',').forEach(function(item){
          $("#main-div").append("<div>"+item+"</div>");
     });
 </script>

jQuery：用逗号分隔的字符串创建html元素？

6 个答案: