Динамический DOM: Как увеличить / уменьшить ID / имена при добавлении / удалении динамических элементов И при перемещении элементов вверх / вниз по DOM?

Question

Динамический DOM: Как увеличить / уменьшить ID / имена при добавлении / удалении динамических элементов И при перемещении элементов вверх / вниз по DOM?

Главный вопрос:
Как вы можете увеличивать / уменьшать идентификаторы / имена динамических элементов, когда они добавляются, удаляются и / или перемещаются вверх и вниз по DOM?

Замечания:
Пожалуйста, смотрите код ниже, чтобы понять ситуацию. Основное внимание уделяется сценарию; Тем не менее, я разместил весь код ниже, чтобы увидеть, о чем я говорю.

Контекст и намерение:
Пользователь сможет выбрать тему из выпадающего меню, а затем написать об этой теме в соответствующем текстовом поле. Они могут добавить несколько разделов для разных тем; они могут удалять темы (все кроме единственного в своем роде); они могут перемещать темы вверх или вниз, как они хотят для приоритета.

Намерение состоит в том, чтобы позже иметь возможность достать тему (опция Выбранный) и соответствующий текст в текстовой области для каждого отдельного раздела.

Я предполагаю, что мне придется ссылаться на уникальный идентификатор и / или имя атрибута.

Как я могу лучше всего достичь этого? Я открыт для любых отзывов.

Насколько я знаю, я могу подойти ко всему этому с неправильной точки зрения.

Заранее спасибо.

Сценарии

$(document).ready(function() {

  // ADD SECTION //
  $(document).on("click", "#AddSection", function() {
    var subSection_1_A = '<ul class="subSection_1_A" id=SubSection[] name=subSection[]><li class="buttons"><button type="button" id="AddSection">&#x2795;</button><button type="button" id="DeleteSection">&#10060;</button><button type="button" id="MoveSectionUp">&#9650;</button><button type="button" id="MoveSectionDown">&#9660;</button></li><li class="select"><label for="Topic">Topic:</label><select type="text" id="Topic[]" name="topic[]"><option value="" disabled selected>Select Option...</option><option value="Option_1">Option 1</option><option value="Option_2">Option 2</option><option value="Option_3">Option 3</option></select></li><li class="textArea"><textarea type="text" id="Text[]" name="text[]"></textarea></li></ul>';
    var current = $(this).closest("ul");
    $(current).after(subSection_1_A);
  });

  // DELETE SECTION //
  $(document).on("click", "#DeleteSection", function() {
    var current = $(this).closest("ul");
    if(current.is(":only-of-type")) {
      alert("You can't delete the only sub-section.");
    }
    else {
    if(confirm("Are you sure you want to delete this?")) 
      current.not(":only-of-type").remove();
    }
  });

   // MOVE SECTION UP //
   $(document).on("click", "#MoveSectionUp", function() { 
    var current = $(this).closest("ul");
    var previous = current.prev("ul");
    if(previous.length !== 0) {
    current.insertBefore(previous);
    }
    return false;
  });

  // MOVE SECTION DOWN //
  $(document).on("click", "#MoveSectionDown", function() {     
    var current = $(this).closest("ul");
    var next = current.next("ul");
    if(next.length !== 0) {
    current.insertAfter(next);
    }
    return false;
  }); 

});

Все вместе (HTML, CSS и jQuery/JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Dynamic DOM</title>
</head>

<style type="text/css">
.subSection {
  padding: 1em 0em 0em 0em;
  margin: 0em 0em 0em .5em;
}
ul, li {
  list-style: none;
}
.subSectionContainer {
  padding: 0em 1em 0em 1em;
}
.subSection_1_A {
  width: 1000px;
  padding: 0em 1em 1em 1em; 
}
li.buttons {
  display: flex;
  border-bottom: 1px solid #000000;
}
button {
  width: 6em;
  height: 2em;
  padding: 0em;
  border-width: 1px 1px 0px 1px;
  border-style: solid;
  border-color: #000000;
  margin: 0em;
  background: none;
  cursor: pointer;
}
button:nth-of-type(odd),
button:nth-of-type(even) {
  border-right: none;
}
button:last-of-type {
  border-right: 1px solid #000000;
}
label, select {
  align-self: center;
  padding: 0em .5em 0em 0em;
}
li.select {
  display: flex;
  border-width: 0px 1px 0px 1px;
  border-style: solid;
  padding: .5em 0em .5em .5em;
}
li.textArea {
  padding: 0em 0em .5em 0em;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #000000;
  text-align: center;
}
textarea {
  width: 98%; 
  height: 100%;
  min-height: 200px;    
}
</style>

<body>
  <h1>Dynamic Elements with Dynamic IDs/Names</h1>
  <h1>Moving Elements Up/Down with Dynamic ID/Name Change</h1>
  <div class="subSection">
    <section class="subSectionContainer">
      <ul class="subSection_1_A" id=SubSection[] name=subSection[]>
        <li class="buttons"><button type="button" id="AddSection">&#x2795;</button><button type="button" id="DeleteSection">&#10060;</button><button type="button" id="MoveSectionUp">&#9650;</button><button type="button" id="MoveSectionDown">&#9660;</button></li>
        <li class="select">
          <label for="Topic">Topic:</label>
          <select type="text" id="Topic[]" name="topic[]">
            <option value="" disabled selected>Select Option...</option>
            <option value="Option_1">Option 1</option>
            <option value="Option_2">Option 2</option>
            <option value="Option_3">Option 3</option>
          </select>
        </li>
        <li class="textArea"><textarea type="text" id="Text[]" name="text[]"></textarea></li>
      </ul>
    </section>
  </div>

  <script type="text/javascript">

  $(document).ready(function() {

    // ADD SECTION //
    $(document).on("click", "#AddSection", function() {
      var subSection_1_A = '<ul class="subSection_1_A" id=SubSection[] name=subSection[]><li class="buttons"><button type="button" id="AddSection">&#x2795;</button><button type="button" id="DeleteSection">&#10060;</button><button type="button" id="MoveSectionUp">&#9650;</button><button type="button" id="MoveSectionDown">&#9660;</button></li><li class="select"><label for="Topic">Topic:</label><select type="text" id="Topic[]" name="topic[]"><option value="" disabled selected>Select Option...</option><option value="Option_1">Option 1</option><option value="Option_2">Option 2</option><option value="Option_3">Option 3</option></select></li><li class="textArea"><textarea type="text" id="Text[]" name="text[]"></textarea></li></ul>';
      var current = $(this).closest("ul");
      $(current).after(subSection_1_A);
    });

    // DELETE SECTION //
    $(document).on("click", "#DeleteSection", function() {
      var current = $(this).closest("ul");
      if(current.is(":only-of-type")) {
        alert("You can't delete the only sub-section.");
      }
      else {
      if(confirm("Are you sure you want to delete this?")) 
        current.not(":only-of-type").remove();
      }
    });

     // MOVE SECTION UP //
     $(document).on("click", "#MoveSectionUp", function() { 
      var current = $(this).closest("ul");
      var previous = current.prev("ul");
      if(previous.length !== 0) {
      current.insertBefore(previous);
      }
      return false;
    });

    // MOVE SECTION DOWN //
    $(document).on("click", "#MoveSectionDown", function() {      
      var current = $(this).closest("ul");
      var next = current.next("ul");
      if(next.length !== 0) {
      current.insertAfter(next);
      }
      return false;
    }); 

  });

  </script>

</body>
</html>

1

jquery dom attributes auto-increment decrement

Источник

user9967797 20 июн '18 в 17:05

1 ответ

Другие вопросы по тегам jquery dom attributes auto-increment decrement

user4753468 20 июн '18 в 17:08 2018-06-20 17:08 · Answer 1 · 2018-06-20 17:08

Как насчет глобальной переменной?

window.counter = 0;

Затем, когда вы добавляете динамический элемент

window.counter++;

0

Источник

user4753468 20 июн '18 в 17:08