Как получить значение всех элементов массива в нескольких div

Question

Как получить значение всех элементов массива в каждом div? Я пытаюсь использовать свой код, но похоже, что вывод значений дублируется ..

Вот мой html код. https://jsfiddle.net/xvrp98wz/1/# и вместеjs = HzjPB5VztO

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="1">
  <input name="sub[1]" data-date="2020-08-05" value="2">
  <input name="sub[1]" data-date="2020-08-06"value="3">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="4">
  <input name="sub[1]" data-date="2020-08-05" value="5">
  <input name="sub[1]" data-date="2020-08-06"value="6">
</div>

 <div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="7">
  <input name="sub[1]" data-date="2020-08-05" value="8">
  <input name="sub[1]" data-date="2020-08-06"value="9">
</div>

и javascript

var Items_parent = [];
var Items_sub = [];

  $(".parent").each(function(e){

              $("input[name^='sub']").each(function () {
                   var val = $(this).val();
                   var date = $(this).attr('data-date');
                   
                   var item = {date : val};
                   Items_sub.push($(this).val());
              });
              
              Items_parent.push(Items_sub);

  });
  
  console.log(Items_parent);

Answer 1

Вы можете просто использовать один $.each, чтобы получить data-date. Вместо .attr вы также можете использовать .data для получения дат каждого ввода, который находится в родительском классе.

Так как немного неясно, что вы пытаетесь сохранить. Я добавил сценарий ios, который учитывает ваш вопрос.

Вы можете выбрать то, что вам подходит лучшее из трех рабочих demos.

Демо: Отображение входного значения и соответствующих данных этого входа

var Items_parent = [];

$(".parent input").each(function(index, data) {
  //get date
  var date = $(this).data('date');
  //name
  var value = $(this).val()
  //Push date
  var obj = {};
  //Obj
  obj[value] = date
  //Push
  Items_parent.push(obj);
});

console.log(Items_parent)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="1">
  <input name="sub[1]" data-date="2020-08-05" value="2">
  <input name="sub[1]" data-date="2020-08-06" value="3">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="4">
  <input name="sub[1]" data-date="2020-08-05" value="5">
  <input name="sub[1]" data-date="2020-08-06" value="6">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="7">
  <input name="sub[1]" data-date="2020-08-05" value="8">
  <input name="sub[1]" data-date="2020-08-06" value="9">
</div>

Демо: Отображение каждой даты ввода как {date: XXXX-XX-XX}

var Items_parent = [];

$(".parent input").each(function(index, data) {
  //get date
  var date = $(this).data('date');
  //Push date
  Items_parent.push({
    date: date
  });
});

//All item
console.log(Items_parent)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="1">
  <input name="sub[1]" data-date="2020-08-05" value="2">
  <input name="sub[1]" data-date="2020-08-06" value="3">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="4">
  <input name="sub[1]" data-date="2020-08-05" value="5">
  <input name="sub[1]" data-date="2020-08-06" value="6">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="7">
  <input name="sub[1]" data-date="2020-08-05" value="8">
  <input name="sub[1]" data-date="2020-08-06" value="9">
</div>

Демо: Отображение каждого ввода как {sub [X]: XXXX-XX-XX}

Если вы хотите получить имя каждого входа с его датой, тогда вы делаете что-то вроде этого.

var Items_parent = [];

$(".parent input").each(function(index, data) {
  //get date
  var date = $(this).data('date');
  //name
  var name = $(this).attr('name');
  //Push date
  var obj = {};
  //Obj
  obj[name] = date
  //Push
  Items_parent.push(obj);
});

console.log(Items_parent)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="1">
  <input name="sub[1]" data-date="2020-08-05" value="2">
  <input name="sub[1]" data-date="2020-08-06" value="3">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="4">
  <input name="sub[1]" data-date="2020-08-05" value="5">
  <input name="sub[1]" data-date="2020-08-06" value="6">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="7">
  <input name="sub[1]" data-date="2020-08-05" value="8">
  <input name="sub[1]" data-date="2020-08-06" value="9">
</div>

Answer 2

var Items_parent = [];
var Items_sub = [];

$(".parent input[name^='sub']").each(function () {
  var val = $(this).val();
  var date = $(this).attr('data-date');

  var item = {date : val};
  Items_sub.push($(this).val());
});
              
Items_parent.push(Items_sub);
document.write(Items_parent);
console.log(Items_parent);

    <div class="parent">
      <input name="sub[0]" data-date="2020-08-04" value="1">
      <input name="sub[1]" data-date="2020-08-05" value="2">
      <input name="sub[1]" data-date="2020-08-06"value="3">
    </div>
    
    <div class="parent">
      <input name="sub[0]" data-date="2020-08-04" value="4">
      <input name="sub[1]" data-date="2020-08-05" value="5">
      <input name="sub[1]" data-date="2020-08-06"value="6">
    </div>
    
     <div class="parent">
      <input name="sub[0]" data-date="2020-08-04" value="7">
      <input name="sub[1]" data-date="2020-08-05" value="8">
      <input name="sub[1]" data-date="2020-08-06"value="9">
    </div>
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 3

Учитывая контекст вопроса и комментарий под ним, похоже, вы пытаетесь создать вложенный массив объектов. Для этого вы можете использовать map(), например:

let output = $('.parent').map((i, parent) => 
  [$(parent).find('input').map((i, input) => ({ date: input.dataset.date })).get()]
).get();

console.log(output);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="1">
  <input name="sub[1]" data-date="2020-08-05" value="2">
  <input name="sub[1]" data-date="2020-08-06" value="3">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="4">
  <input name="sub[1]" data-date="2020-08-05" value="5">
  <input name="sub[1]" data-date="2020-08-06" value="6">
</div>

<div class="parent">
  <input name="sub[0]" data-date="2020-08-04" value="7">
  <input name="sub[1]" data-date="2020-08-05" value="8">
  <input name="sub[1]" data-date="2020-08-06" value="9">
</div>