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>

希望它有所帮助！

Answer 2

jQuery使大多数事情比纯JavaScript更容易，但它也使事情过于复杂。例如：

根据新数据更改元素的ID

 var I = 4;

<强>的jQuery

$('#ID').attr('id', $(this).attr('id')+I);

jQuery / Plain JavaScript

$('#ID')[0].id = $(this)[0].id + I;     

通过将jQuery对象解除引用到Plain Objects中，我们可以获得两者所提供的优势。将jQuery对象解引用到Plain对象可以通过以下方式完成：

括号表示法中的索引为0

$('#ID')[0]

get（）方法传递0

$('#ID').get(0); 

jQuery Objects无法识别Plain JavaScript方法和属性，反之亦然。因此，当使用解除引用的对象时，点表示法属性的更容易的语法变得可用。

演示

在演示中评论的详细信息

＆＃13;

＆＃13;

// Register click event on button directly
$(".addbtn").on("click", function() {

  // Get a total count of .item -- this is the number for the set
  var I = $('.item').toArray().length;
  console.log(I);

  // Clone the hidden .item
  var $next = $('.new-li .item').clone(true, true);

  // Store the dereferenced value of clone
  var next = $next[0];

  // Set clone's id 
  next.id = 'item' + I;

  // Find each input under clone
  $(next).find('input').each(function() {

    // Get its current id
    var ID = $(this)[0].id;

    // Create a new id and replace its numbers with the new number
    var newID = ID.replace(/[0-9]{1,}/, I);

    // Set id to the new id from previous line
    $(this)[0].id = newID;

    // Find the input's parent element
    var btn = $(this).parent('.sub-btn');

    // Set that parent's for attribute value to the newID
    btn.attr('for', newID);
  });

  /* Append clone to the list -- By appending clone last we never have to 
  || worry about the last item being the item just added. Another advantage 
  || is that all actions were done off of the DOM. Anything done to elements
  || on the DOM are much more difficult for the browser to process because
  || there are other elements or other aspects that could be included while 
  || in the DOM.
  */
  $('#list').append($next);

});

＆＃13;

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

.new-li {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;