Question

我想在表单中获取所有span元素。 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">

这是jQuery的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];
});

这是小提琴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>

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

我将不胜感激任何帮助

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/

Answer 2

您无法使用.text返回多个元素的值。选择了多少元素无关紧要，.text只会返回第一个元素的值。

几乎所有返回值的jQuery方法都是这样的。

如果要获取匹配元素数组的值数组，则需要另一个map。您还需要使用, #加入字符串，因为您要生成#id1id2id3而不是#id1, #id2, #id3的内容：

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

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

那就是说，你已经在第一张地图中选择了正确的元素集。您传递每个元素以获取其ID，您已经拥有元素。没有理由把它扔掉并用它的ID重新选择同样的东西。

Answer 3

如果我说得对，下面的代码将完成这项工作

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

选中fiddle。

获取表单内所有span元素的值和id

3 个答案: