使用JavaScript从HTML中提取嵌套数据

我有一个包含问题和答案的HTML页面。我想从HTML页面中提取数据（问题/答案），并将其放入JavaScript对象中

这是我的HTML页面中的类结构：

• 问句块
  • 问题（每个问题块仅1个问题）
  • 答案（每个问题可能有多个答案）

这是我的HTML代码，其结构如下：

<div class="question-block">
    <h3>Question 1</h3>
    <label class="question">Name</label>
    <input type="text" class="answer" />

    <div class="question-block" style="margin-left:20px;">
        <h4>Question 1 a</h4>
        <label class="question">What is your gender?</label>
        <div class="radio">
            <input type="radio" class="answer" name="gender" id="radio-male" value="male">
            <label for="radio-male">Male</label>
        </div>
        <div class="radio">
            <input type="radio" class="answer" name="gender" id="radio-female" value="female">
            <label for="radio-female">Female</label>
        </div>
    </div>
</div>

<div class="question-block">
    <h3>Question 2</h3>
    <label class="question">Occupation</label>
    <input type="text" class="answer" />
</div>
<br />

<button id="extract" type="button">Extract HTML data</button>

<pre id="extract-div"></pre>

除了嵌套的“问题块”（1a.你的性别是什么？）。这个问题的答案也添加到问题1中

如何使用JavaScript或JQlite（我使用angular）仅选择位于当前“问题块”类中的答案

应该可以将我的“问题块”类嵌套到多个层次。（不仅仅是示例中的1级）

---

如果您想测试它或查看我的JavaScript代码，下面是我的建议：

我通常不喜欢发布我编写的JavaScript库的答案，但在这种情况下似乎是合适的，因为我看不到任何迹象表明您在库或框架之外使用

是我编写的一个小JavaScript类，没有依赖项，它将从表单字段名创建一个深度嵌套的对象

即使使用AngularJS，您也可以通过更改表单字段中的name属性值来调整现有用户界面：

<div id="some-common-parent-element-or-form">
    <div class="question-block">
        <h3>Question 1</h3>
        <label class="question">Name</label>
        <input type="text" class="answer" name="questions[0][answers][0][answer]" />
        <input type="hidden" name="questions[0][question]" value="Name" />

        <div class="question-block" style="margin-left:20px;">
            <h4>Question 1 a</h4>
            <label class="question">What is your gender?</label>
            <input type="hidden" name="questions[1][question]" value="What is your gender?" />
            <div class="radio">
                <input type="radio" class="questions[1][answers][0][answer]" name="gender" id="radio-male" value="male">
                <label for="radio-male">Male</label>
            </div>
            <div class="radio">
                <input type="radio" class="questions[1][answers][0][answer]" name="gender" id="radio-female" value="female">
                <label for="radio-female">Female</label>
            </div>
        </div>
    </div>

    <div class="question-block">
        <h3>Question 2</h3>
        <label class="question">Why do hotdogs come in packages of 10, but hotdog buns come in packages of 8?</label>
        <input type="text" class="answer" name="questions[2][answers][0][answer]" />
        <input type="hidden" name="questions[2][question]" value="Why do hotdogs come in packages of 10, but hotdog buns come in packages of 8?" />
    </div>
</div>

<button id="extract" type="button">Extract HTML data</button>

<pre id="extract-div"></pre>

<script type="text/javascript" src="/path/to/reaper.js"></script>

---

这将为您提供所需的数据结构。

完全翻开这一轮，一种更长期的方法是在JavaScript中定义此结构，然后使用模板系统生成HTML。使用类似KnockoutJS或Angular的工具还可以在JavaScript中的值在UI中更改时进行动态更新。如果您可以更改

名称

属性值，则可以使用我创建的JavaScript库，该库将获取所有

输入

，

textarea

和

选择给定元素中的元素，并使用表单字段名属性创建一个JavaScript对象，作为对象属性名称和数据类型的指南。@JamesThorpe我使用AngularJS，我想到了这一点，但在我创建所有内容后，他们为我们提供了输出对象结构。要将这个结构映射到我的UI，需要进行大量重构。而且预算并不总是允许：）@GregBurghardt谢谢你的图书馆。我要试一试！如何避免手动设置问题编号？（问题[0][answers][0]）如果我在中间添加一个问题，我不想更新每个名称。如果使用某种模板语言生成HTML，无论是在客户端还是服务器上，都需要使用当前问题的索引和当前答案的索引。如果你坚持硬编码HTML，你坚持硬编码索引。也许我们可以添加标签到你的库？然后我们可以避免重复的问题或隐藏的输入值..很好的库。这真的很有效。我想为之贡献力量。：）
<div id="some-common-parent-element-or-form">
    <div class="question-block">
        <h3>Question 1</h3>
        <label class="question">Name</label>
        <input type="text" class="answer" name="questions[0][answers][0][answer]" />
        <input type="hidden" name="questions[0][question]" value="Name" />

        <div class="question-block" style="margin-left:20px;">
            <h4>Question 1 a</h4>
            <label class="question">What is your gender?</label>
            <input type="hidden" name="questions[1][question]" value="What is your gender?" />
            <div class="radio">
                <input type="radio" class="questions[1][answers][0][answer]" name="gender" id="radio-male" value="male">
                <label for="radio-male">Male</label>
            </div>
            <div class="radio">
                <input type="radio" class="questions[1][answers][0][answer]" name="gender" id="radio-female" value="female">
                <label for="radio-female">Female</label>
            </div>
        </div>
    </div>

    <div class="question-block">
        <h3>Question 2</h3>
        <label class="question">Why do hotdogs come in packages of 10, but hotdog buns come in packages of 8?</label>
        <input type="text" class="answer" name="questions[2][answers][0][answer]" />
        <input type="hidden" name="questions[2][question]" value="Why do hotdogs come in packages of 10, but hotdog buns come in packages of 8?" />
    </div>
</div>

<button id="extract" type="button">Extract HTML data</button>

<pre id="extract-div"></pre>

<script type="text/javascript" src="/path/to/reaper.js"></script>

var extractor = new Reaper(),
    data = null,
    element = document.getElementById("some-common-parent-element-or-form");

extractor.flat = false;
data = extractor.getData(element);