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

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>

$(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);
    });
});

目标：

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

$(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数组（？），其中包含

节

名称，后跟一组

elementID+html

，如果任何节子级包含属性

contenteditable

，并且该属性设置为

true

目前，它包括它没有像应该的那样结束

jsonObj

，它还将第二个

节

包含到该数组中，对于第二个

节

包含第一个

节

数据

我尝试使用

dataObj.length=0清空dataObj数组没有成功

我做错了什么

最终目标：

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

$(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);
    });
});

创建一个连接到Laravel 5.1后端的内联编辑器这就是您想要得到的吗


var objectMain={}；
$（'section'）。每个（函数（）{
var section=$（this.attr（'id'）；
objectMain[节]={}；
if（$（this）.find（'[contenteditable]'）.length！=0）{
$（'[contenteditable=true]'）。每个（函数（）{
var id=$（this.attr（'id'）；
objectMain[section][id]=$（this.html（）；
});
}否则{
返回；
}
});
console.log（objectMain）；
$（'#stringJ'）.html（JSON.stringify（objectMain））

标题
副标题
试验
标题
副标题
按钮
按钮
按钮



与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表示法。
添加了my if语句，使JSON对象中不包含具有contenteditable属性的元素。在那之后，这个解决方案就完美了。非常感谢。尝试了这个，但得到了与之前相同的结果，很抱歉，这可能是因为我对jQuery/JSON太陌生了。谢谢你的帮助。