Javascript 获取表单中所有跨度元素的值和ID

我试图在表单中获取所有的span元素。span元素将变为输入文本字段并可编辑。当您单击“离开”时，它们将变回跨度图元。我将附上小提琴活的例子。 我尝试了一下，但问题是我得到了两个ID，但只得到了第一个span元素的值

这是我的html：

<span name="inputEditableTest" class="pztest" id="inputEditableTest" data-editable="">First Element</span>

<span name="inputEditableTest2" class="pztest" id="inputEditableTest2" data-editable="">Second Element</span>

<input id="test" type="submit" class="btn btn-primary" value="Submit">

如何仅在特定表单中读取ID和值，例如：

<form id = "editableForm">
<span id="test1">Need these details</span>
<span id="test2">Need these details</span>
<input type="submit">
</form>
<span id="test3">Don't need details of this span</span>

需要这些细节吗
需要这些细节吗
不需要此跨度的详细信息

假设我在页面上有不止一个表单，我希望JavaScript检测哪个表单已经提交，并获取表单中这些span元素的值

---

如果您不能使用

.text

返回多个元素的值，我将非常感谢您的帮助。无论选择了多少个元素，

.text

只返回第一个元素的值

实际上，所有返回值的jQuery方法都是这样运行的

如果要获取匹配元素数组的值数组，则需要另一个

映射

。您还需要使用

，#

连接字符串，因为您要按照

#id1id2id3

而不是

#id1、#id2、#id3

的思路生成某些内容：

var ok = $("span").map(function () {
    return this.id;
}).join(', #')

var ok2 = $("#" + ok).map(function () {
  return $(this).text();
});

也就是说，您已经在第一个贴图中选择了正确的元素集。如果您传递每个元素以获取其ID，那么您已经拥有了该元素。没有理由扔掉它，并根据它的ID重新选择相同的东西

$("#test").on('click', function(){
    var result = {};
    $("span").each(function (k, v) {
        result[v.id] = v.innerHTML;
    });

    alert(JSON.stringify(result));

    //return [ok, ok2];
});

以下是一个例子：

{element id : element value}

---

货柜问题：

如果要获取此容器中的所有div，应使用此选择器：

#editableForm span

$("#editableForm span").each(function (k, v) {
    result[v.id] = v.innerHTML;
});

但是，如果只想获取第一级子元素，则应使用此选择器：

#editableForm>span

获取

#editableForm

容器中所有跨度的示例：

---

如果希望有多个表单，则可以这样做：

$('form').on('submit', function(e){
    e.preventDefault();
    var result = {};
    $(this).find('span').each(function (k, v) {
        result[v.id] = v.innerHTML;
    });

    alert(JSON.stringify(result));

    //return [ok, ok2];
});

---

有两个表单的示例：

如果我没弄错，下面的代码就可以了

        var ok = $("span")
            .map(function () {
                  return  {id: $(this).attr('id') ,  value: $(this).text()};
            }).get();

---

检查此项。

在跨度中循环以填充

ok2

。。。我真的很喜欢这个答案，这正是我想要的，谢谢：）我已经添加了关于在特定表单中获取span的问题的另一部分，你知道答案吗？如果我在页面上有两个表单，我如何检测哪个表单被提交并仅获取这些值？对于这个用例，请将代码包装在$（文档）中。on（'submit'，'form'，function（）{……}）并使用$（this）.find（'span'）仅查找此表单中的跨距。非常感谢这回答了我所有的问题：）

        var ok = $("span")
            .map(function () {
                  return  {id: $(this).attr('id') ,  value: $(this).text()};
            }).get();