javascript - jQuery 动态添加 substr 到现有的类名

Question

代码设置为动态添加 unique identifier使用 var lastElement 到不同的元素。我的代码的问题是 .attr("id", +rowNum);正在删除 id已经存在并且我想要:

• +rowNum附加到现有 string 的末尾.

我想避免 .attr("id", "addname" +rowNum);因为内容是动态的并且 id/class将设置元素。

$("body").on("click", ".addbtn", function() {
  var $item = $('.item').last();
  var next = $('.new-li').html();
  $('#list').append(next);
  // Gets last number dynamically, instead of saving it as global variable.
  var lastElement = $('.item').last();
  var rowNum = parseInt($item.attr("id").substr(4)) + 1;
  lastElement.attr('id', 'item' + rowNum);
  lastElement.find(".sub-input").attr("id", +rowNum);
  lastElement.find(".sub-input.alt").attr("id", +rowNum);
  lastElement.find(".sub-btn").attr("for", +rowNum);
  lastElement.find(".sub-btn.alt").attr("for", +rowNum);
});

.sub-item {
  border: 2px solid;
  height: 50px;
  width: 50px;
}

.new-li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="list">
  <div class="new-li" id="item0">
    <div class="item">
      <div class="sub-item">
        <div class="sub-list">
          <label class="sub-btn" for="red0">
<input class="sub-input" id="red0" type="radio" name="color"><b>red</b>
</label>
        </div>
      </div>
      <div class="sub-item">
        <div class="sub-list">
          <label class="sub-btn" for="blue0">
<input class="sub-input" id="blue0" type="radio" name="color"><b>blue</b>
</label>
        </div>
      </div>
      <div class="sub-item alt">
        <div class="sub-list alt">
          <label class="sub-btn alt" for="apple0">
<input class="sub-input alt" id="apple0" type="radio" name="fruit"><b>tiger</b>
</label>
        </div>
      </div>
    </div>
  </div>
  <div class="item" id="item1">
    <div class="sub-item">
      <div class="sub-list">
        <label class="sub-btn" for="red1">
<input class="sub-input" id="red1" type="radio" name="color"><b>red</b>
</label>
      </div>
    </div>
    <div class="sub-item">
      <div class="sub-list">
        <label class="sub-btn" for="blue1">
<input class="sub-input" id="blue1" type="radio" name="color"><b>blue</b>
</label>
      </div>
    </div>
    <div class="sub-item alt">
      <div class="sub-list alt">
        <label class="sub-btn alt" for="apple1">
<input class="sub-input alt" id="apple1" type="radio" name="fruit"><b>blue</b>
</label>
      </div>
    </div>
  </div>
  <div class="add">
    <button type="button" class="addbtn">Add</button>
  </div>
</div>

Answer 1

您可以扩展jQuery.fn来创建一个帮助器，将数字附加到给定的属性。这样您就可以将创建的助手与元素选择器链接起来，甚至可以一次将助手应用于多个元素。

首先您需要定义助手:

jQuery.fn.extend({
    rowNumber: function(attr, row) {
        return this.each(function() {
            $(this).attr(attr, $(this).attr(attr) + row);
        });
    }
});

然后您可以在需要时应用帮助器:

lastElement.find(".sub-input").rowNumber("id", rowNum);

或者事件将其一次应用于多个元素:

lastElement.find(".sub-input, .sub-input.alt").rowNumber("id", rowNum);

编辑应用于代码段:

jQuery.fn.extend({
    rowNumber: function(attr, row) {
        return this.each(function() {
            $(this).attr(attr, $(this).attr(attr) + row);
        });
    }
});

$("body").on("click", ".addbtn", function() {
    var $item = $('.item').last();
    var next = $('.new-li').html();
    $('#list').append(next);
    var lastElement = $('.item').last();
    var rowNum = parseInt($item.attr("id").substr(4)) + 1;
    lastElement.attr('id', 'item' + rowNum);
    lastElement.find(".sub-input, .sub-input.alt").rowNumber("id", +rowNum);
    lastElement.find(".sub-btn, .sub-btn.alt").rowNumber("for", +rowNum);
});

.sub-item {
  border: 2px solid;
  height: 50px;
  width: 50px;
}

.new-li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list">
  <div class="new-li" id="item0">
    <div class="item">
      <div class="sub-item">
        <div class="sub-list">
          <label class="sub-btn" for="red0">
<input class="sub-input" id="red0" type="radio" name="color"><b>red</b>
</label>
        </div>
      </div>
      <div class="sub-item">
        <div class="sub-list">
          <label class="sub-btn" for="blue0">
<input class="sub-input" id="blue0" type="radio" name="color"><b>blue</b>
</label>
        </div>
      </div>
      <div class="sub-item alt">
        <div class="sub-list alt">
          <label class="sub-btn alt" for="apple0">
<input class="sub-input alt" id="apple0" type="radio" name="fruit"><b>tiger</b>
</label>
        </div>
      </div>
    </div>
  </div>
  <div class="item" id="item1">
    <div class="sub-item">
      <div class="sub-list">
        <label class="sub-btn" for="red1">
<input class="sub-input" id="red1" type="radio" name="color"><b>red</b>
</label>
      </div>
    </div>
    <div class="sub-item">
      <div class="sub-list">
        <label class="sub-btn" for="blue1">
<input class="sub-input" id="blue1" type="radio" name="color"><b>blue</b>
</label>
      </div>
    </div>
    <div class="sub-item alt">
      <div class="sub-list alt">
        <label class="sub-btn alt" for="apple1">
<input class="sub-input alt" id="apple1" type="radio" name="fruit"><b>blue</b>
</label>
      </div>
    </div>
  </div>
  <div class="add">
    <button type="button" class="addbtn">Add</button>
  </div>
</div>

希望对你有帮助!