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

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等)，我有一个链接，它将使用类divPhase删除它的父div。

以下是代码：

$(".removeLink").closest(".divPhase").remove();

我试图实现的是，即使在删除了一些div之后，仍然有一个上升、有序和连续的div列表。

我会尽量说清楚的。现在，如果我有，假设上面有5个div(具有这些is：div1、div2、div3、div4和div5)，如果我单击类removeLink的链接删除div3，我得到的是4个div的列表(div1、div2、div4和div5)。

这个列表不是连续的，因为在div2和div4之间我们需要div3。我想得到的是div1，div2，div3，div4 (div4应该变成div3，div5应该变成div3)。

此外，对于textarea的I，我应该实现同样的目标(title-5和description-5应该变成title-4和description-4，而title-4和description-4应该变成title-3和description-3)。

我该怎么做？

Answer 1

下面是一种更优雅的方法:在删除.divPhase (remove-row)时触发一个事件，并在其上附加一个updateIndexes侦听器。在这个函数的主体中，您可以在所有.divPhase的循环中更改您喜欢的任何属性。

注意：虽然下面的代码片段适用于这个用例，但是如果您发现自己经常需要在每个元素/属性中添加额外的修改，您可能需要考虑数据-first/ template呈现解决方案，比如http://handlebarsjs.com/或http://mustache.github.io/，以获得一个全面的列表(参见http://www.javascripting.com/application-tools/templating/?sort=rating )。

​

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>

​

Answer 2

你必须循环通过所有剩余的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