Добавление элемента li в список можно выбрать с помощью кнопки [closed]

Tina Tabet спросил: 13 июня 2018 в 03:18 в: javascript
<ol id="selectable">

  <li class="ui-widget-content">List Item 1</li>
  
</ol>

Как добавить новый элемент в список с помощью кнопки add и индекс будет увеличиваться на +1 при нажатии кнопки с помощью jQuery?

Например, когда я нажимаю кнопку "Добавить", будет добавлен элемент списка 2, затем нажмите "Список" 3 будет добавлено.

2 ответа

Есть решение
mostafa tourad ответил: 13 июня 2018 в 03:25

Вы можете сделать это без Jquery, как?

  • создать кнопку и дать ей id btn, чтобы выбрать ее в javascript li>
  • выберите список по его id
  • , создав переменную с именем index, например, чтобы отслеживать каждый раз, когда вы нажимаете кнопку
  • , когда пользователь нажмите кнопку, индекс инкремента и создайте новый элемент li
  • установите содержимое li и, наконец, добавьте его в список

вот полный пример

const selectable = document.getElementById('selectable');
const button = document.getElementById('btn');

let index = 1;

button.addEventListener('click', () => {
    index++;
    const li = document.createElement('li');
    li.textContent = 'List Item ' + index;
    selectable.appendChild(li);
});
<button id="btn">Add</button>
<ol id="selectable">

  <li class="ui-widget-content">List Item 1</li>
  
</ol>
Tina Tabet ответил: 13 июня 2018 в 03:50
есть пример использования jquery?
mostafa tourad ответил: 13 июня 2018 в 04:15
Вы можете сделать это без jquery, но если вам нужно сделать это с помощью Jquery, алгоритм будет таким же, но вы просто выберите элемент, используя синтаксис jquery.
hev1 ответил: 13 июня 2018 в 03:41

С помощью jQuery вы можете использовать функцию append, чтобы вставить элемент за другим элементом:

$('#add').click(function(e){
  var itemid = $('#list li:last').attr('id');
  var num = parseInt(itemid.substring(4, itemid.length), 10)+1;
  $('#list li:last').append('<li id="item'+num+'">List Item '+num+'</li>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add item to list</button>
<ul id="list">
<li id="item1">List Item 1</li>
</ul>

Дополнительное видео по вопросу: Добавление элемента li в список можно выбрать с помощью кнопки [closed]

jQuery подгрузка контента без перезагрузки

JavaScript - How To Delete Selected LI From UL List In JS [ with source code ]

Javascript Siblings - Add Remove Class - Set Active DIV [ With Source Code ]