獲取表單中所有span元素的值和id

Question

我正在嘗試獲取表單內的所有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/

---

容器問題：

您應該使用以下選擇器： #editableForm span如果要獲取此容器中的所有div。

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

但是，如果您只想獲取一級子元素，則應使用以下選擇器： #editableForm > span

在#editableForm容器中獲取所有跨度的#editableForm ： https : #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];
});

兩種形式的示例： 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();

檢查這個小提琴 。