카테고리 없음 2020. 8. 11. 02:42

질문

각 div의 모든 배열 요소 값을 얻는 방법은 무엇입니까? 내 코드로 시도했지만 값 출력이 중복 된 것 같습니다 ..

다음은 내 HTML 코드입니다.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>

및 자바스크립트

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);

답변1

하나의 $. each 를 사용하여 data-date 를 얻을 수 있습니다. .attr 대신 .data 를 사용하여 상위 class에있는 각 입력의 날짜를 가져올 수도 있습니다.

저장하려는 내용이 약간 불분명하기 때문입니다. 귀하의 질문을 고려한 시나리오를 추가했습니다.

아래의 세 가지 데모 에서 가장 적합한 것을 선택할 수 있습니다.

데모 : 입력 값 및 해당 입력의 관련 데이터 날짜 표시

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>

Expand snippet

데모 : 각 입력 날짜를 {날짜 : 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>

Expand snippet

데모 : 각 입력을 {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>

Expand snippet

답변2

질문의 컨텍스트와 그 아래의 설명을 고려할 때 중첩 된 객체 배열을 만들려고하는 것 같습니다. 이를 위해 다음과 같이 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>

Expand snippet

답변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>

Expand snippet

출처 : https://stackoverflow.com/questions/63243731/how-to-get-all-array-elements-value-in-multiple-div

저작자표시 (새창열림)

ABOUT ME

질답창고 질답창고

질문

답변1

답변2

답변3

티스토리툴바