Javascript / JQuery使我定義的所有DOM元素具有多維數組？

Question

可以說我在表單上有以下DOM ：

<body>
    <input id="input_1" class="post" type="text" value="abc" />
    <input id="input_2" class="xxxx" type="text" value="xyz" /> <!--TO IGNORE-->
    <input id="input_3" class="post" type="checkbox" checked="checked" />
    <input id="input_4" class="post" type="radio" checked="checked" />
    <select id="input_5" class="post">
        <option value="1">One</option>
        <option value="2" selected="selected">Two</option>
    </select>
    <input id="input_6" class="xxxx" type="checkbox" /> <!--TO IGNORE-->
</body>

如何獲得所有class="post"元素的值數組？
因此， Multidimentional Array的方式類似於：

POST_ELEMENTS[0]["input_1"] = "abc";
POST_ELEMENTS[1]["input_3"] = 1;
POST_ELEMENTS[2]["input_4"] = 1;
POST_ELEMENTS[3]["input_5"] = "two";

請問如何構造所有特定類class="post"的Array ？

Answer 1

不需要一個2維陣列，陣列的索引將指示0 ， 1 ， 2 ，等等。

類似於數組的jQuery對象

您可以獲得類似數組的對象，該對象已允許您訪問匹配的元素。

var posts = $('.post');

alert(posts[0].id); // input_1
alert(posts[0].value); // abc

類似於數組的純JS查找

您還可以使用純JavaScript方法getElementsByClassName來獲取所有元素（盡管jQuery函數必須在不強制使用$()情況下起作用）

var posts = document.getElementsByClassName('post');

alert(posts[0].id); // input_1
alert(posts[0].value); // abc

數組

替代性地構造一個實際的數組（而不是類似數組的對象），您可以這樣做：

var posts = [];
$('.post').each(function () {
    posts.push(this);
});

alert(posts[0].id); // input_1
alert(posts[0].value); // abc

Answer 2

var posts = {}

$('.post').each(function(v,i){
    posts[this.id] = this.value
})

將返回一維數組{'input_1'：1，'input_2'：2}

var posts = []

$('.post').each(function(v,i){
    var obj = {}
    obj[this.id] = this.value
    posts.push( obj)
})

將創建多維數組

Answer 3

您可以使用getElementsByClassName()獲取所有節點，然后將它們映射為所需的格式：

var POST_ELEMENTS = {};
[].forEach.call(
    document.getElementsByClassName('post'), 
    function(item) {
        POST_ELEMENTS[item.id] = item.value;
    }
);

演示版

Answer 4

var obj=[];
  console.log(obj);
$('.post').each(function(key,value)
                {  obj[key]={};
                obj[key][$(value).attr('id')]=$(value).attr('value');               

              });

這是我的小提琴

Answer 5

我看不到有2個維度的任何原因-據我所知，這里只需要一個：

var posts = {};
$('.port').each(function() {
    posts[this.id] = this.value;
});

結果是鍵/值對的對象：

posts = {
    'input_1': abc',
    ...
}

Javascript / JQuery使我定義的所有DOM元素具有多維數組？

問題描述

5 個解決方案

解決方案1
2 2013-04-05 08:32:39

類似於數組的jQuery對象

類似於數組的純JS查找

數組

解決方案2
1 2013-04-05 08:30:59

解決方案3
1 2013-04-05 08:39:42

解決方案4
1 2013-04-05 09:00:51

解決方案5
0 2013-04-05 08:32:28

Javascript / JQuery使我定義的所有DOM元素具有多維數組？

問題描述

5 個解決方案

解決方案1 2 2013-04-05 08:32:39

類似於數組的jQuery對象

類似於數組的純JS查找

數組

解決方案2 1 2013-04-05 08:30:59

解決方案3 1 2013-04-05 08:39:42

解決方案4 1 2013-04-05 09:00:51

解決方案5 0 2013-04-05 08:32:28

解決方案1
2 2013-04-05 08:32:39

解決方案2
1 2013-04-05 08:30:59

解決方案3
1 2013-04-05 08:39:42

解決方案4
1 2013-04-05 09:00:51

解決方案5
0 2013-04-05 08:32:28