Question

我有一个div和一个按钮：

<div id="screenlist"></div>
<a href="" id="btnscreen">Add new</a>

现在我的jQuery代码会向我的div添加一些示例数据：

$('#btnscreen').click(function(e){
    e.preventDefault();
    $('#screenlist')
        .append('www.sampleurl.com</br>');
 });

所以最后我的div看起来像这样：

 <div id="screenlist">
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
 </div>

我想将div的内容列为serilize，以便将其发布到服务器并获取每个元素。

有任何线索吗？

Answer 1

您可以使用.text()，String.prototype.match()与RegExp /[^\n\s]+/g匹配一个或多个不是换行符或空格字符的字符，创建一个属性名设置的对象到id元素，将值设置为.match()的数组结果，其中包含<br>元素内的#screenlist后面的每一行文字

var screenlist = $("#screenlist");
var data = {
  [screenlist[0].id]: screenlist.text().match(/[^\n\s]+/g)
}
console.log(data);
// $.post("/path/to/resource", data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="screenlist">
  www.sampleurl.com
  <br>www.sampleurl.com
  <br>www.sampleurl.com
  <br>www.sampleurl.com
  <br>www.sampleurl.com
  <br>www.sampleurl.com
  <br>
</div>

Answer 2

如果您只是想在screenlist中序列化当前的html，可以这样做，

$(function() {
  var contents = $('#screenlist').html().split(/\n|\<br>/).filter(function(v) {
    return /\w+/.test(v);
  });
  var data = {};

  for (var k in contents) {
    data[k] = contents[k];
  }

  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="screenlist">
  www.sampleurl.com</br>
  www.sampleurl.com</br>
  www.sampleurl.com</br>
  www.sampleurl.com</br>
  www.sampleurl.com</br>
  www.sampleurl.com</br>
</div>

编辑:(供您发表评论）

用正则表达式解析html标签是个坏主意，因此我建议采用另一种方法。

$(function() {
  var data = {};

  $('#screenlist > div').each(function(i, elem) {
    var $elem = $(elem);
    data[$elem.attr('id')] = $elem.text();
  });

  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="screenlist">
  <div id=1>www.sampleurl.com</div>
  </br>
  <div id=2>www.sampleurl.com</div>
  </br>
  <div id=3>www.sampleurl.com</div>
  </br>
  <div id=4>www.sampleurl.com</div>
  </br>
  <div id=5>www.sampleurl.com</div>
  </br>
</div>

jQuery - 如何将div内容转换为序列化数据

2 个答案: