Js innerHTML自動IDを追加する方法は？

Question

https://jsfiddle.net/3x97c81p/4/

function add_items() { 
     var objTo = document.getElementById('item_area') 
     var divtest = document.createElement("div"); 
     var sort_num = $('input[type="hidden"]:last').attr('sort[]') + 1 ; 
     divtest.innerHTML = '<div class="row"><input type="text" name="price"><input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>'; 
     objTo.appendChild(divtest) 
} 

私は最後の＃ソート[]値を取得するために$('input[type="hidden"]:last').attr('sort[]')を試みる自動++

... input#sort[] 1..2..3でソートIDを追加する必要があります。しかし、定義されていません

Answer 1

トリックは

あなたのコードは、バニラのJSとjQueryを使って少し混乱していた...そして、あなたはそこに.rowの項目のカウントすることができます<div id="item-area">内の要素をラップすることですので、ちょうどバニラでそれをしない理由js：jQueryを必要としません。

function add_items() { 
 
     var objTo = document.querySelector('#item_area') 
 
     var divtest = document.createElement("div"); 
 
     var sort_num = objTo.querySelectorAll('.row').length + 1; 
 
     divtest.innerHTML = '<div class="row"><input type="text" name="price"><input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>'; 
 
     objTo.appendChild(divtest) 
 
}

<input type="button" id="more_fields" onclick="add_items();" value="Add More" class="buttonr" /> 
 

 
<div id="item_area"> 
 
    <div class="row"> 
 
    <input type="text" name="price"> 
 
    <input type="hidden" name="sort[]" value="1"> 
 
    </div> 
 
    <div class="row"> 
 
    <input type="text" name="price"> 
 
    <input type="hidden" name="sort[]" value="2"> 
 
    </div> 
 
</div>

Answer 2

グローバルカウンタがあり、add_items()に電話するたびに増加します。ページを更新すると、0に戻ります。また、sort[]属性がないので、カウンタをidに追加するコードを更新しました。

var counter = 0; 
function add_items() { 
    var objTo = document.getElementById('item_area') 
    var divtest = document.createElement("div"); 
    var sort_num = $('input[type="hidden"]:last').attr('id') + counter ; 
    counter ++; 
    divtest.innerHTML = '<div class="row"><input type="text" name="price"> 
    <input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>'; 
    objTo.appendChild(divtest) 
} 

Answer 3

あなただけの間違った属性をターゲットに。

var sort_num = + $('input[type="hidden"]:last').attr('value') + 1; 

Answer 4

最後のsort入力ボックスの値を取得するには、これを使用します。

var sort_num = parseInt($('input[name="sort[]"]:last').val()); 

function add_items() { 
 
     var objTo = $('#item_area') 
 
     var divtest = document.createElement("div"); 
 
     var sort_num = parseInt($('input[name="sort[]"]:last').val()) + 1; 
 
     console.log(sort_num); 
 
     divtest.innerHTML = '<div class="row"><input type="text" name="price"><input type="hidden" name="sort[]" value="'+sort_num+'"></section></div>'; 
 
     objTo.append(divtest) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="button" id="more_fields" onclick="add_items();" value="Add More" class="buttonr" /> 
 

 
<div class="row"> 
 
    <input type="text" name="price"> 
 
    <input type="hidden" name="sort[]" value="1"> 
 
</div> 
 
<div class="row"> 
 
    <input type="text" name="price"> 
 
    <input type="hidden" name="sort[]" value="2"> 
 
</div> 
 

 
<div id="item_area"></div>