如何增加使用 jQuery 创建的最后一个跨度的值？

Question

我一直在寻找许多解决方案，但我从未（目前）找到解决方案。我想增加通过在创建的 li 标签中单击创建的最后一个跨度的值，该标签当然在无序列表中。

这是HTML

<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
  <ul class="tabs">
    <li>Item<span class="listAdd">1</span></li>
    <li>Item <span class="listAdd">2</span></li>
    <li>Item <span class="listAdd">3</span></li>
    <li>Item <span class="listAdd">4</span></li>
    <li>Item <span class="listAdd">5</span></li>
  </ul>
</div>

和 iQuery

$(document).on('click','#btn1', function() {
  $("#cntn ul").append('<li>Item <span class="listAdd"></span></li>');
  $('.listAdd').append(Number($('.listAdd').text())+ 1);
});

基本上，我想在单击按钮后在跨度中添加一个具有增量值的新列表项。如果你能帮助我那就太棒了，我超级卡住了......谢谢！

Answer 1

https://jsfiddle.net/k57zecqd/

您没有定义要添加的元素，所以您要添加所有元素。定义 .last() 以简单地说明该类型的最后一个元素。从那里，我去获取元素的最后一个值，并向其添加 1 - 期望它在所有情况下都是整数。

之后，我将之前计算的值添加到最后一项。早点做意味着我将 NaN 加 1，这意味着我没有获得该职位的价值。注意：为了代码完成和标准，最后一行代码不应该是追加，而是最有可能插入到元素中的东西，但这将起作用并帮助你完成大部分工作。

$(document).on('click','#btn1', function(){
var val = parseInt($('.listAdd').last().text())+1;
$("#cntn ul").append('<li>Item <span class="listAdd"></span></li>');
$('.listAdd').last().append(val);
});

Answer 2

根据 <span> 元素的用途，最简单的方法是避免明确为其分配数字，而是使用 CSS 生成的内容：

// caching a reference to the <button> element:
let button = document.querySelector('#btn1');

// binding the anonymous method of as the 'click' event-handler:
button.addEventListener('click', function() {

  // creating an <li> and a <span> element:
  let li = document.createElement('li'),
      span = document.createElement('span');

  // setting the text of the <li>:
  li.textContent = 'Item ';
  
  // appending the <span> to the <li>:
  li.appendChild(span);

  // adding the 'listAdd' class to the <span>:
  span.classList.add('listAdd');

  // finding the first (if any) 'ul.tabs' element, and appending
  // the <li> (along with its content) to that element:
  document.querySelector('ul.tabs').appendChild(li);
});

ul.tabs {
  counter-reset: spanCount;
}

.tabs li {
  counter-increment: spanCount;
}

li span.listAdd::before {
  content: counter(spanCount);
}

<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
  <ul class="tabs">
    <li>Item <span class="listAdd"></span></li>
    <li>Item <span class="listAdd"></span></li>
    <li>Item <span class="listAdd"></span></li>
    <li>Item <span class="listAdd"></span></li>
    <li>Item <span class="listAdd"></span></li>
  </ul>
</div>

显然上面的内容也可以重写，如果 <span> 纯粹是 present/style 数字，将生成的内容应用于 <li> 元素：

// caching a reference to the <button> element:
let button = document.querySelector('#btn1');

// binding the anonymous method of as the 'click' event-handler:
button.addEventListener('click', function() {

  // creating an <li> and a <span> element:
  let li = document.createElement('li');

  // setting the text of the <li>:
  li.textContent = 'Item ';

  // finding the first (if any) 'ul.tabs' element, and appending
  // the <li> to that element:
  document.querySelector('ul.tabs').appendChild(li);
});

ul.tabs {
  counter-reset: spanCount;
}

.tabs li {
  counter-increment: spanCount;
}

/* using ::after, instead of ::before, in order to
   correctly place the generated content: */
li::after {
  /* note the addition of an empty space to separate
     the counter from the text: */
  content: ' ' counter(spanCount);
}

<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
  <ul class="tabs">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

CSS 生成的内容不存在于 DOM 中，因此如果用户必须能够与 counter/number 交互（选择、复制等），则以下内容是一个选项：

// binding the anonymous function as the 'click' event-handler
// of the '#btn1' element:
$('#btn1').on('click', function() {

  // creating an <li> element:
  $('<li>', {
    // setting its text to the supplied string:
    'text': 'Item '

  // appending a new element to the created <li>:
  }).append(

    // creating a <span> element:
    $('<span>', {

      // setting its class:
      'class': 'listAdd',

      // setting the text of the <span> to be equal to
      // the current number of '.listAdd' elements, plus 1:
      'text': $('.listAdd').length + 1
    })

  // appending the created <li> - along with its created child -
  // to the '.tabs' element:
  ).appendTo('.tabs');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
  <ul class="tabs">
    <li>Item <span class="listAdd">1</span></li>
    <li>Item <span class="listAdd">2</span></li>
    <li>Item <span class="listAdd">3</span></li>
    <li>Item <span class="listAdd">4</span></li>
    <li>Item <span class="listAdd">5</span></li>
  </ul>
</div>

上面当然可以改写成普通的 JavaScript:

// finding the first (if any) '#btn1' element:
document.querySelector('#btn1')

  // binding the anonymous function as the event-handler of
  // the 'click' event:
  .addEventListener('click', function() {
  
    // creating an <li> element and a <span> element:
    let li = document.createElement('li'),
        span = document.createElement('span'),
    // finding the first (if any) element matching the CSS Selector:
        list = document.querySelector('.tabs');

    // setting the text content of the <li> element:
    li.textContent = 'Item ';
    // appending the <span> element to the <li> element:
    li.appendChild(span);

    // adding the 'listAdd' class ot the created <span>:
    span.classList.add('listAdd');
    
    // setting the text content of the created <span> to be equal to
    // the current number of 'span.listAdd' elements found within the
    // list element, and adding 1 to that number:
    span.textContent = list.querySelectorAll('span.listAdd').length + 1;

    // appending the created <li> (and children) to the list element:
    list.appendChild(li);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
  <ul class="tabs">
    <li>Item <span class="listAdd">1</span></li>
    <li>Item <span class="listAdd">2</span></li>
    <li>Item <span class="listAdd">3</span></li>
    <li>Item <span class="listAdd">4</span></li>
    <li>Item <span class="listAdd">5</span></li>
  </ul>
</div>

CSS:
JavaScript:
jQuery:
- append().
- appendTo().
- on().

如何增加使用 jQuery 创建的最后一个跨度的值？

How to increment the valueof the last span created with jQuery?

jquery

add

increment

button

html-lists