Добавить атрибуты данных в массив jquery
Я пытаюсь получить атрибут данных из списка div и добавить его в массив jquery. Каждый раз, когда я прохожу через цикл, я получаю пустые данные. Элемент select работает, как я тестировал на созданном мною массиве. Это вопрос новичка, извините, но я хожу по кругу.
<html>
<body>
<div class = "poop" data-colour = "blue"> blue </div>
<div class = "poop" data-colour = "green"> green </div>
<div class = "poop" data-colour = "yellow"> yellow </div>
<div class = "new-select"></div>
<script>
var data2 = [];
$('.poop').each(function(){
var $this = $(this);
arr.push([ $this.data('colour') ]);
});
var s = $('<select />');
for(var val in data2) {
$('<option />', {value: val, text: data[val]}).appendTo(s);
}
s.appendTo('.new-select');
</script>
</body>
</html>
data2 никогда не толкали. arr.push() мог выдать ошибку.
Я просто понял, что data2 не был помечен при нажатии массива. Спасибо Правин.
Ответы 2
- В строке
var $this = $(this)нет необходимости, потому что в этом случае нам не нужно сохранять предыдущую переменнуюthis(у нас не было бы новой области видимости и, следовательно, новогоthis). - Переменная
arrникогда не определялась, поэтому я использовал толькоdata2. - Чтобы получить массив из 3 элементов (
['blue, 'green', 'yellow']), вы должны передать только каждое значение в методpush. Но поpush([ $this.data('colour') ])вы получите массив из трех массивов ([ ['blue'], ['green'], ['yellow'] ]). - Хотя я не хотел менять всю часть вашего кода, но, согласно это и комментариям друзей, вы должны использовать
for...inтолько для объектов, а не массивов. Вместо этого вы можете использоватьfor...of.
Надеюсь на помощь.
var data2 = [];
$('.poop').each(function(){
data2.push($(this).data('colour'));
});
console.info(data2) // ["blue", "green", "yellow"]
var s = $('<select />');
for(var val of data2) {
$('<option />', {value: val, text: data2[val]}).appendTo(s);
}
s.appendTo('.new-select');<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "poop" data-colour = "blue"> blue </div>
<div class = "poop" data-colour = "green"> green </div>
<div class = "poop" data-colour = "yellow"> yellow </div>
<div class = "new-select"></div>Классный еще один ответ с использованием массива, это помогает мне изучить несколько подходов. Спасибо за ответ Ализаде.
Не следует использовать for in на массивах
рад помочь @ insomniac22
Спасибо за отзыв, он обновлен. @charlietfl
В вашей логике есть несколько проблем, в первую очередь связанных с определяемыми вами переменными и тем, как вы их используете / не используете. Например, вы никогда не определяете arr как массив для отправки, data2 всегда пуст, поскольку вы никогда с ним ничего не делаете, а data также не определен, поэтому data[val] вызовет ошибку. Наконец, у используемого вами варианта цикла for будут проблемы при использовании с массивом.
Чтобы упорядочить логику, вы можете использовать map() для создания массива элементов option в виде строк, а затем применить их к select, который вы создаете с помощью html(), например:
var html = $('.poop').map(function() {
var col = $(this).data('colour');
return `<option value = "${col}">${col}</option>`;
}).get().join('');
var $s = $('<select />').html(html);
$s.appendTo('.new-select');<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "poop" data-colour = "blue">blue</div>
<div class = "poop" data-colour = "green">green</div>
<div class = "poop" data-colour = "yellow">yellow</div>
<div class = "new-select"></div>Эта логика позволяет избежать использования двух циклов. Если вы предпочитаете иметь несколько циклов для отдельного создания цветового массива, вы все равно можете использовать map(), например:
var colours = $('.poop').map(function() {
return $(this).data('colour');
}).get();
var $s = $('<select />');
colours.forEach(function(colour) {
$s.append(`<option value = "${colour}">${colour}</option>`);
});
$s.appendTo('.new-select');<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "poop" data-colour = "blue">blue</div>
<div class = "poop" data-colour = "green">green</div>
<div class = "poop" data-colour = "yellow">yellow</div>
<div class = "new-select"></div>Спасибо, Рори, это сработало, я вижу, что вы тоже не используете массивы, и это здорово, и то, что я пытался сделать изначально. Спасибо за вашу помощь в такой простой вещи. Теперь попробуем удалить дубликаты.
Без проблем. Не забудьте принять ответ, если это помогло
1.
for...in...предназначен для объектов, а не массивов, 2. Вы отправляете массив с одним элементом, а не только с цветом в неопределенной переменной.