Arhn - архитектура программирования

Очистка и добавление новых элементов в список в jquery

У меня есть мобильный список jquery с некоторыми элементами списка. Я просто хочу удалить старые элементы и динамически добавлять новые элементы. Я пробовал следующий код, но он не удаляет предыдущие элементы списка и добавляет новые элементы под ними.

  <div data-role="page" id="main">
  <div data-role="content">
  <ul data-role="listview" id="listing">
  </ul>
   <button onclick="loadList()">Click</button>
   </div>
    </div>

   var  c1 = 0;
   var c2 = 10;
   function loadList() {
    $('#listing').empty();
    location.reload();
   for(var i = c1; i<c2; i++) {
    $('#listing').append('<li>'+i+'</li>');
     }
    c1+=1;
    c2+=1;
   }
jquery jquery-mobile
07.11.2015

Ответы:


1

Сначала вы должны написать свой код JavaScript в тег <script>. (Если вы пишете внутри тега сценария, отредактируйте свой вопрос и добавьте тег сценария). Ваш код работает правильно. Но есть одна проблема. Когда вы звоните location.reload(), он обновляет вашу страницу. , поэтому он добавляет элементы в ваш ul, но затем после перезагрузки снова удаляет их. Таким образом, вы не видите никаких изменений. Если вы хотите, чтобы он работал, удалите location.reload()

<div data-role="page" id="main">
  <div data-role="content">
  <ul data-role="listview" id="listing">
  </ul>
   <button onclick="loadList()">Click</button>
   </div>
    </div>

<script>
   var  c1 = 0;
   var c2 = 10;
   function loadList() {
    $('#listing').empty();
    location.reload(); // <- comment this or remove
   for(var i = c1; i<c2; i++) {
    $('#listing').append('<li>'+i+'</li>');
     }
    c1+=1;
    c2+=1;
   };
</script>
07.11.2015
  • Я знаю, что они должны быть в ‹script›‹/script›. $('#listing li').remove() не показывает содержимое списка. Даже не предыдущий. 07.11.2015
  • см. мой отредактированный ответ. Проблема в location.reload() 07.11.2015
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..