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

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 和该属性设置为 true.

目前它包含它并没有像它应该的那样结束 jsonObj，它也将第二个 section 包含到该数组中，第二个 section 包含第一个 sections 数据.

我尝试使用 dataObj.length = 0; 清空 dataObj 数组，但没有成功。

我做错了什么？

最终目标：

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

Answer 1

这是您想要得到的吗？

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

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

Answer 2

很像 Rejith 的回答，我会推荐这种方法：

$(document).ready(function() {
    $('#edit-button').click(function() {
        var jsonObj = {};
        $('section').each(function() {
            var section = {};

            $(this).find('[contenteditable="true"]').each(function() {
                section[$(this).attr('id')] = $(this).html();
            });

            jsonObj[$(this).attr('id')] = section;
        });
        alert(JSON.stringify(jsonObj));
    });
});

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

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

Create JSON array by each-loop through parent and child elements

arrays

each

jquery

json