选择第一个，第二个. .div in a jquery while loop.

Question

>我正在制作一个测验模块，我想让管理员为问题添加更多可能性，并进一步删除单个问题。我做了下面的jquery，如果我不删除任何项目，它会在每行的id上附加正确的数字。但是，如果我开始删除，它会混合ID的周围。重要的是我把它做好了，因为它应该进入一个数据库，用户可以从中提取它，并以与创建相同的顺序显示它。

因此，我做了一个 while 循环，以检查 id 后面的数字是否顺序正确（如果不是，它应该在末尾用正确的数字替换 id），因为 i 在删除一行后递增。我似乎无法让它工作！

JSFIDDLE：https://jsfiddle.net/g8ysemf0/

jQuery

            $("#btnid").click(function () {
            $('.valgmulighed:last').clone().attr('id', 'valgmulighed' + ($('.valgmulighed').length + 1)).insertAfter('.valgmulighed:last');
        });
        var max = $('.valgmulighed').length;
        var i = 1;
        $('body').on('click', '.slet', function () {
            if ($('.slet').length > 1)
                $(this).closest('.valgmulighed').remove();
            while (i < max) {
                if ($('.valgmulighed').length != '.valgmulighed' + i) {
                    $('.valgmulighed').attr('id', 'valgmulighed' + i);
                }
                i++;
            }
        });

.HTML

    <div class="toptekst">
  <span>Tilføj valgmuligheder her</span>
  <input type="button" id="btnid" value="+" />
</div>
<div class="valgmulighed" id="valgmulighed1">
  <label>
    <input type="checkbox" name="check2" id="sv1" /><span class="label-text">Rigtigt</span>
  </label>
  <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
  <div class="slet">
    <span>Slet</span>
  </div>
</div>

Answer 1

删除项目并为剩余项目提供新 ID 很容易：

$(".slet").on("click", function(event) {
    // remove the item
    $(this).closest('.valgmulighed').remove();
    // set id of remaining items
    $(".valgmulighed").each(function(index) {
        $(this).attr("id", "valgmulighed" + index);
    });
});

但是，您可能不需要在每次删除问题时都设置新的id。 是否可以接受使用一组稀疏的 id 填充数据库？ 例如，

<div id="valgmulighed1">...</div>
<div id="valgmulighed3">...</div>
<div id="valgmulighed4">...</div>
<div id="valgmulighed9">...</div>

？ 如果这没问题，则只需在创建时增加您的<div> id，删除时不执行任何操作。

Answer 2

要完全充实我的建议，请参阅此更新的小提琴：https://jsfiddle.net/g8ysemf0/2/

首先，没有删除测验项目的功能，因此我将整个集合放在包装器中，以便能够设置一个事件来检测对动态生成的.slet对象的点击

$('#wrapper').on('click','div.slet', function(){$(this).parent().remove();})

接下来，我输入了一个按钮，用于将页面提交到数据库。我在该按钮上设置了一个函数，该函数将在用户完成编辑后循环遍历存在的每个项目，然后为项目分配新 ID：

 $('#submit-quiz').click(function(){
   //create counter
   var counter = 0;
   //go through each item and assign them new IDs
   $('div.valgmulighed').each(function(){
     //add to the counter for each quiz item
     counter++;
     //set the ID
     $(this).attr('id', 'valgmulighed' + counter);
   });
//Any submit functions/logic after all IDs are assigned
return true;
});

"接受"答案也是一个很好的方法，随着项目的删除，ID 会更新。这完全取决于您何时要执行此操作。