Question

HTML：

<section id="intro">
        <div id="ih" contenteditable="true">Header</div>
        <div id="ish" contenteditable="true">Subheader</div>
        <a id="ibtn" contenteditable="true">Test</a>
</section>

<section id="articles">
        <div id="ah" contenteditable="true">Header</div>
        <div id="ash" contenteditable="true">Subheader</div>
        <a id="btn-1" contenteditable="true">Button</a>
        <a id="btn-2" contenteditable="true">Button</a>
        <a id="btn-3" contenteditable="true">Button</a>
</section>

jQuery的：

$(document).ready(function() {
    $('#edit-button').click(function() {
        var dataObj = [];
        var jsonObj = [];
        $('section').each(function() {
            var section = $(this).attr('id');
            if( $(this).find('[contenteditable]').length != 0 ) {
                $('[contenteditable=true]').each(function() {
                    var id = $(this).attr('id');
                    dataObj.push('\"' + id + '\":\"' + $(this).html() + '\"');
                });
                jsonObj.push('{\"' + section + '\":{' + dataObj + '}}');
                dataObj.length = 0;
            } else {
                return;
            }
        });
        alert(jsonObj);
    });
});

目标：

创建一个JSON数组（？），其中包含section名称，后跟一组elementID+html，如果任何部分包含属性contenteditable并且该属性设置为{ {1}}。

目前它包括它没有结束true，它包括第二个jsonObj到该数组，第二个section包括第一个section数据

我尝试使用sections清空dataObj数组但没有成功。

我做错了什么？

最终目标：

创建连接到Laravel 5.1后端的内联编辑器

Answer 1

就像雷吉斯的回答一样，我会推荐这种方法：

Error:
    Traceback (most recent call last):
  File "C:...\Main.py", line 46, in <module>
    screen.blit(sight.image, sight.rect)
AttributeError: 'int' object has no attribute 'blit'

您不需要从头开始构建JSON对象，您可以构建常规对象，然后将其转换为JSON表示法。

Answer 2

这是你想要得到的吗？

＆＃13;

var objectMain = {};
$('section').each(function() {
  var section = $(this).attr('id');
  objectMain[section] = {};
  if ($(this).find('[contenteditable]').length != 0) {
    $('[contenteditable=true]').each(function() {
      var id = $(this).attr('id');
      objectMain[section][id] = $(this).html();
    });
  } else {
    return;
  }
});
console.log(objectMain);
$('#stringJ').html(JSON.stringify(objectMain))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="intro">
  <div id="ih" contenteditable="true">Header</div>
  <div id="ish" contenteditable="true">Subheader</div>
  <a id="ibtn" contenteditable="true">Test</a>
</section>

<section id="articles">
  <div id="ah" contenteditable="true">Header</div>
  <div id="ash" contenteditable="true">Subheader</div>
  <a id="btn-1" contenteditable="true">Button</a>
  <a id="btn-2" contenteditable="true">Button</a>
  <a id="btn-3" contenteditable="true">Button</a>
</section><br/><br/>
<div id="stringJ" ></div>

＆＃13;

通过父元素和子元素的每个循环创建JSON数组

2 个答案: