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#sort[] 1..2..3 ... auto ++

中添加一个排序ID

我尝试$('input[type="hidden"]:last').attr('sort[]')获取最后一个#sortal []值。但未定义

Answer 1

诀窍是将元素包装在<div id="item-area">中，然后你可以在那里计算.row项......

你的代码与vanilla JS和jQuery有点混乱，所以为什么不在vanilla 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>

Js innerHTML如何添加自动ID？

4 个答案: