如何获取多个div中的所有数组元素值

Question

How to get all array elements value in each div? I try with my code but it seem value output is duplicate..

Here is my html code. https://jsfiddle.net/xvrp98wz/1/#&togetherjs=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>

and 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

Given the context of the question and the comment under it, it appears you're attempting to create a nested array of objects. To do that you can use map() , like this:

 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>

Answer 2

You can simply use one $.each to get data-date . Instead of .attr you can also use .data to get the dates of each input which are in the parent class.

Since its a bit unclear what you trying to store. I have added a scenarios which considering your question.

You can choose what suits you best from the below three working demos .

Demo: Showing input value and relevant datadate of that input

 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>

Demo: Showing each input date as {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>

Demo: Showing each input as {sub[X]: XXXX-XX-XX}

If you want to get the name of the each input with its date then you do something like this.

 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 3

 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>