Javascript 如何从内部HTML div中的字段构造json对象结构

我有以下HTML，需要为输入字段构造JSON。我需要将标有“collect”的div作为JSON中的对象。对象可能有其他对象或字段（类似于具有内部div和输入字段的div）。我正在使用JQuery。我有一些代码，我已经开发，但没有结果，我想要的。如果需要，我可以发布代码。此外，如果需要，我可以移动div类，如“p1”、“p2”等。。进入rel属性

谢谢你的帮助

示例HTML

<div class="p1 collect">
   <div class="somestyleclass">
    <div class="p2 collect">
        <input type="text" name="i1" value="1">
        <input type="text" name="i2" value="2">
    </div>
    <div class="p3 collect">
        <input type="text" name="i3" value="3">
        <input type="text" name="i4" value="4">
    </div>
   </div>

   <div class="somestyleclass">
    <div class="p4 collect">
        <div class="somestyleclass">
            <h1>title</h1>
            <div class="p5 collect">
                <input type="text" name="i5" value="5">
                <input type="text" name="i6" value="6">
            </div>
            <div class="p5 collect">
                <input type="text" name="i5" value="7">
                <input type="text" name="i6" value="8">
            </div>
            <div class="p5 collect">
                <input type="text" name="i5" value="9">
                <input type="text" name="i6" value="10">
            </div>
        </div>
    </div>  
   </div>

</div>

---

你能展示一下到目前为止你已经尝试了什么吗？这需要是通用的吗？还是仅仅针对您发布的HTML？这需要是通用的。我还试图发布我在JSFIDLE中的内容，并添加一个链接。我认为

fieldset

s和

name

s比divs和classes更合适。这个链接有我正在处理的代码的一个版本：我有另一个版本，我将清理并发布

{
    "p1": {
        "p2": {
            "i1":"1", "i2":"2"
        },
        "p3": {
            "i3":"3", "i4":"4"
        },
        "p4": [
            {
                "p5":{
                    "i5":"5", "i6":"6"
                }
            },
            {
                "p5":{
                    "i7":"7", "i8":"8"
                }
            },
            {
                "p5":{
                    "i9":"9", "i10":"10"
                }
            }
        ]

    }
}