javascript - 获取表单内所有跨度元素的值和 ID

Question

我正在尝试获取表单内的所有 span 元素。跨度元素正在变成输入文本字段并变得可编辑。当您点击离开时，它们会变回 span 元素。我将附上 fiddle 现场示例。 我试了一下，但问题是我得到了两个 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">

这是带有 jQ​​uery 的 JavaScript:

$('body').on('click', '[data-editable]', function () {

    var $el = $(this);
    var name = $($el).attr('name');
    var value = $($el).text();
    console.log(name);
    var $input = $('<input name="' + name + '" id="' + name + '" value="' + value + '"/>').val($el.text());
    $el.replaceWith($input);

    var save = function () {
        var $p = $('<span data-editable class="pztest" name="' + name + '" id="' + name + '" />').text($input.val());
        $input.replaceWith($p);
    };

    $input.one('blur', save).focus();

});


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

    var ok2 = $("#" + ok).text();
    alert(ok);
    alert(ok2);
    //return [ok, ok2];
});

这是 fiddle https://jsfiddle.net/v427zbo1/3/

我想将结果作为数组示例返回:

{element id : element value}

我怎样才能只在特定表单中读取 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>

假设我在页面上有超过 1 个表单，我希望 JavaScript 检测已提交的表单并获取表单内这些跨度元素的值

如有任何帮助，我将不胜感激

Answer 1

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

    alert(JSON.stringify(result));

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

这是一个例子:https://jsfiddle.net/v427zbo1/4/

---

容器问题:

如果您想获得此容器内的所有 div，您应该使用此选择器:#editableForm span。

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

但是如果你只想获得一级子元素，那么你应该使用这个选择器:#editableForm > span

在 #editableForm 容器中获取所有跨度的示例:https://jsfiddle.net/v427zbo1/9/

---

如果你想有多个表单，那么你可以这样做:

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

具有两种形式的示例:https://jsfiddle.net/v427zbo1/10/