jQueryを使用してArray内の異なるデータIDを持つ複数の入力フィールドの値を取得する方法は？

Question

私は複数の入力フィールドを持ち、バックボーンを使用しています。データIDを持つ複数の入力フィールドを生成しています。 data-idが順番に異なってくるたびに。

今、ユーザーが作成して入力したすべての入力フィールドの値を取得する必要があります。 （複数の入力フィールドを作成することができます値はクリックイベントとユーザーに移入されます。）

<div class="Title" data-id="title_1"> 
    <label>Additional Title</label> 
    <input type="text"> 
</div> 

<div class="Title" data-id="title_2"> 
    <label>Additional Title</label> 
    <input type="text"> 
</div> 

<div class="Title" data-id="title_3"> 
    <label>Additional Title</label> 
    <input type="text"> 
</div> 

<div class="Title" data-id="title_4"> 
    <label>Additional Title</label> 
    <input type="text"> 
</div> 

<div class="Title" data-id="title_5"> 
    <label>Additional Title</label> 
    <input type="text"> 
</div> 

Answer 1

ユーザーにアクセスできるように、すべてのテキストボックスに同じクラスを与えるには、ここでは、テキストボックスに容易

を生成し、あなたはHTMLですここで

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 

<div class="Title" data-id="title_1"> 
    <label>Additional Title</label> 
    <input class="textfield" type="text" value="val 1"> 
</div> 

<div class="Title" data-id="title_2"> 
    <label>Additional Title</label> 
    <input class="textfield" type="text" value="val 2"> 
</div> 

<div class="Title" data-id="title_3"> 
    <label>Additional Title</label> 
    <input type="text" class="textfield" value="val 3"> 
</div> 

<div class="Title" data-id="title_4"> 
    <label>Additional Title</label> 
    <input type="text" class="textfield" value="val 4"> 
</div> 

<div class="Title" data-id="title_5"> 
    <label>Additional Title</label> 
    <input type="text" class="textfield" value="val 5"> 
</div> 

はあなたのjqueryのです

$(".textfield").each(function(index) { 
    debugger; 
    console.log($(this).closest('div').attr('data-id')); 
    console.log(index + ": " + $(this).val()); 
}); 

Answer 2

https://jsfiddle.net/L3xyL4oe/

//bind selector methods to easy to use functions 
let $$ = document.querySelectorAll.bind(document); 
let $ = document.querySelector.bind(document); 

//setup function to quickly change dom list to an array 
let toArray = (domList) => [].slice.call(domList); 

//when button is clicked 
$("button").addEventListener('click',() => { 
    //get all the inputs into an array 
    let inputs = toArray($$(".Title[data-id^='title'] > input")); 

    //iterate through the array 
    for (let input of inputs) { 
    //for each input with a value, alert the value 
    if (input.value) alert(input.value); 
    } 
});