JQuery получает значения от входов и создает массив

У меня много ресурсов на странице. Я хочу создать ассоциативный массив с каждым именем и значением ввода, используя jQuery. Я пробовал:

<input class="activeInput" type="text" name="key1" value="red">
<input class="activeInput" type="text" name="key3" value="France">

inputValues = $('.activeInput').val();

EDIT. Благодаря проницательным комментариям, возможно, создание объекта - лучший способ пойти. Любые предложения о том, как создать объект?

Ответ 1

Вы можете использовать .each() для итерации по элементам и добавления имен и значений к карте (простой объект) следующим образом:

var map = {};
$(".activeInput").each(function() {
    map[$(this).attr("name")] = $(this).val();
});

alert(map.key1); // "red"

Посмотрите на действие.

Ответ 2

Я знаю, что этому вопросу четыре года, и принятого ответа достаточно. Тем не менее, я хочу внести свой ответ ради завершения, так как этот вопрос является первым результатом поиска в Google.

jQuery имеет функцию отображения с версии 1.2 (выпущена в 2007 году). Можно сделать что-то так же просто, как следующее (это не кросс-браузерное решение):

var $inputValues = $('.activeInput').map((i, el) => el.val());

Хотя никто никогда не должен использовать функции стрелок в JavaScript, они не поддерживаются в IE или Safari. Ниже приведено кросс-браузерное решение:

var $inputValues = $('.activeInput').map(function() {
    return $(this).val();
});

Важно отметить, что возвращаемое значение не является собственным массивом. Это может вызвать проблемы при попытке использовать методы, существующие в Array.prototype. Чтобы преобразовать результат в массив, можно сделать следующее:

var inputValues = $('.activeInput').map(function() {
    return $(this).val();
}).toArray();

Ответ 3

Запустив их через цикл, вы можете создать объект со строковыми доступными значениями. Javascript не имеет понятия ассоциативного массива, но с использованием синтаксиса скобок вы можете получить доступ к свойствам объекта почти так же, как ассоциативный массив работает в PHP.

var values = {};
$('.activeInput').each(function() {
    values[this.name] = this.value;
});

console.log(values['key1'], values['key3']);
// Note, this is the same as above.
console.log(values.key1, values.key3);

В вашей консоли вы увидите: red France

Вот JsFiddle http://jsfiddle.net/rEtVt/ для него.

Это также называется хэшмапом (понятием), используемым для быстрого поиска.

Ответ 4

var inputValues = new Array();
$('input').each(function(){
    inputValues[$(this).attr('name')] = $(this).val();
});

Это предполагает, конечно, что вы хотите значение всех входов.

Сказано, что многие причины не использовать и Array были привлечены к моему вниманию.

Ответ 5

Если вам нужно сериализовать форму для представления ajax, вы должны посмотреть serialize и serializeArray jQuery методы. Особые случаи могут возникать, когда у вас есть много входов с тем же атрибутом name, который должен создавать массив на сервере.

В противном случае я бы вызвал jquery serializeArray в элементе формы и перебирал его результаты, чтобы преобразовать его в объект.

UPD: добавлен пример http://jsfiddle.net/zQNUW/

Ответ 6

Попробуйте следующее:

var values = new Object() // creates a new instance of an object
$('.activeInput').each(function() {
    values[$(this).attr('name')] = $(this).val()
})

Чтобы проверить свойства объекта:

output = ""
for (property in values) {
  output += property + ': ' + values[property]+'; ';
}
alert(output)