Question

这是我的情况：

<div id="div1" class="divPhase">
    <div class="row margin-top-1">
        <div class="column">
            <label>Title Phase 1:</label>
            <textarea id="title-1" name="title-phase-1" rows="6" required></textarea>
        </div>
        <div class="column">
            <label>Description Phase 1:</label>
            <textarea id="description-1" name="description-phase-1" rows="6" required></textarea>
        </div>
        <a class="removeLink">Remove div1</a>
    </div>
</div>
<div id="div2" class="divPhase">
    <div class="row margin-top-2">
        <div class="column">
            <label>Title Phase 2:</label>
            <textarea id="title-2" name="title-phase-2" rows="6" required></textarea>
        </div>
        <div class="column">
            <label>Description Phase 2:</label>
            <textarea id="description-2" name="description-phase-2" rows="6" required></textarea>
        </div>
        <a class="removeLink">Remove div2</a>
    </div>
</div>
....
....
and so on with div3, div4 etc.

正如您所看到的，对于每个div（div1，div2，div3等等），我都有一个链接，它将使用类{{1}删除其父div }。

以下是代码：

divPhase

我想要实现的是即使删除了一些div，也要有一个递增的有序和连续的div列表。

我会更加清楚。截至目前，如果有的话，让我们说5个div就像上面的那样（使用这些ID：$(".removeLink").closest(".divPhase").remove();，div1，div2，div3和{ {1}}）如果我通过点击类div4的链接删除div5，我得到的是4个div的列表（div3，removeLink，{{ 1}}和div1）。

此列表不是连续的，因为在div2和div4之间我们需要div5。我想要得到的是div2，div4，div3，div1（div2应该成为div3和{{1}应该成为。）

此外，我应该为textarea的ID（div4和div4成为div3和div5同时title-5和{description-5达到同样的效果{1}}应该成为title-4和description-4）。

我该怎么做？

Answer 1

您必须在点击删除后立即循环所有剩余的divPhase ...重新编号。

这是一个很大的循环 我真的不确定这是否有用。
但无论如何，这是如何做到的。

$(".removeLink").on("click",function(){
  $(this).closest(".divPhase").remove();

  var divPhase = $(document).find(".divPhase");

  for(i=0;i<divPhase.length;i++){
    var j= i+1;
    divPhase.eq(i).attr("id","div"+j);

    // Row class
    var row = divPhase.eq(i).find(".row");
    row.attr("class","row margin-top-"+j);

    // Labels
    var labels = divPhase.eq(i).find("label");
    for(k=0;k<labels.length;k++){
      var labelHtml = labels.eq(k).html();
      labels.eq(k).html(labelHtml.substr(0,labelHtml.length-2)+j+":");
    }

    // Textareas
    var textareas = divPhase.eq(i).find("textarea");
    for(k=0;k<textareas.length;k++){
      var textareaId = textareas.eq(k).attr("id");
      textareas.eq(k).attr("id",textareaId.substr(0,textareaId.length-1)+j);

      var textareaName = textareas.eq(k).attr("name");
      textareas.eq(k).attr("name",textareaName.substr(0,textareaName.length-1)+j);
    }

    // Remove link
    var removeLinkHtml = divPhase.eq(i).find(".removeLink").html();
    divPhase.eq(i).find(".removeLink").html(removeLinkHtml.substr(0,removeLinkHtml.length-1)+j);
  }
});

CodePen

Answer 2

这是一种更优雅的方法：在移除.divPhase（remove-row）时触发事件，并为其附加updateIndexes侦听器。在此函数的主体中，您可以在所有.divPhase的循环中更改您喜欢的任何属性。

注意： 虽然下面的代码段适用于此用例，但如果您发现自己经常需要为每个元素/属性添加额外的修改，则可能需要考虑数据-first / template 呈现解决方案，如Handlebars或Mustache，有关综合列表，请参阅javascripting.com

var removeEntry = function() {
  $('#rows').trigger('remove-row', [$(this).closest('.row').index()]);
  $(this).closest('.row').remove();
};

var updateIndexes = function(e, index) {
  var selector = ':input, .divPhase';
  $('#rows').children().filter(function(i) {
    return i > index;
  }).each(function(i) {
    $(this).find(selector).add(this).each(function() {
      var displayIndex = (i + 1);
      if (this.className && this.className.length)
        this.className = this.className.slice(0, -1) + displayIndex;
      if (this.id && this.id.length)
        this.id = this.id.slice(0, -1) + displayIndex;
      if (this.name && this.name.length)
        this.name = this.name.slice(0, -1) + displayIndex;
      if (this.value && this.value.length)
        this.value = this.value.slice(0, -1) + displayIndex;
    });
  });
};

$('#rows').on('remove-row', updateIndexes);
$('.row a').on('click', removeEntry);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rows">
  <div class="row divPhase-1">
    <input type="text" name="title-1" id="title-1" value="value-1">
    <textarea name="desc-1" id="desc-1"></textarea>
    <a href="#desc-1-removed">Remove</a>
  </div>
  <div class="row divPhase-2">
    <input type="text" name="title-2" id="title-2" value="value-2">
    <textarea name="desc-2" id="desc-2"></textarea>
    <a href="#desc-2-removed">Remove</a>
  </div>
</div>

在元素单击时使用jquery更改html文本的id和类

2 个答案: