javascript - 内部 HTML div のフィールドから json オブジェクト構造を構築する方法

Question

次の HTML があり、入力フィールドの JSON を作成する必要があります。「収集」でマークされた DIV を JSON のオブジェクトとして作成する必要があります。オブジェクトには、他のオブジェクトまたはフィールドがある場合があります (内部 DIV および入力フィールドを持つ DIV に類似)。私はJQueryを使用しています。開発したコードがいくつかありますが、必要な結果が得られません。必要に応じて、そのコードを投稿できます。また、必要に応じて、「p1」、「p2」などの div クラスを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>

結果の JSON:

{
    "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"
                }
            }
        ]

    }
}