Question

我的代码http://jsfiddle.net/iwebsmile/rbfr6hvh/

我输入了数字

<input type="number" id="r1">
<input type="number" id="r2">

更改号后创建新行

$(".list").append("<div class='row' id="+r1+">bbb</div>");

结果：

<li class="list">
    <div class="row" id="r1">1</div>
</li>

当第一次更改数字id =“r2”结果时：

<li class="list">
    <div class="row" id="r1">1</div>
    <div class="row" id="r2">1</div>
</li>

第二次更改后，我不需要重复id

<li class="list">
    <div class="row" id="r1">1</div>
    <div class="row" id="r2">1</div>
    <div class="row" id="r2">2</div>
</li>

Answer 1

创建全局变量idCount并在每个新行上递增它：

var idCount = 1;

制作波纹管代码的功能。然后调用该函数。

function AddRow(){
idCount++;
$(".list").append("<div class='row' id='r"+ idCount +"'>bbb</div>");
}

Answer 2

input元素和新的div不能具有相同的id，还要检查这样的元素是否存在

function selectGuest() {
    $(".checkGuest").change(function () {
        if ($(this).val() > 0) {
            var getID = this.id;
            var getGuest = $(this).val();

            var $el = $('#e' + getID);
            if (!$el.length) {
                $el = $('<div />', {
                    className: 'row',
                    id: 'e' + getID
                }).appendTo('.list');
            }
            $el.text(getGuest);
        }
    });
}
selectGuest();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1 : <input type="number" id="r1" class="checkGuest" value="0">
<br/>
2 : <input type="number" id="r2" class="checkGuest" value="0">
<div class="list"></div>

如何获取id多个li以检查重复ID

2 个答案: