javascript - 如何通过单击按钮更改添加元素的顺序？

Question

我需要有关以下代码的帮助。我必须添加新的 li 元素，并通过向上或向下单击 img 来交换元素。我需要动态地做到这一点。非常感谢。

$(document).ready(function(){
	$(".p-title").hide().fadeIn(1500);
	const nameInput = document.querySelector('#f-name');
	nameInput.focus();
	
	$('form').on('submit', e=>{
		e.preventDefault(); 
		let name = nameInput.value; 
		addItem(name);
	})
	let addItem = (name)=>{
		$('#list').append('<li>'+name+'<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>');
		nameInput.value = '';
		nameInput.focus();
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container">
        <div class="row">
          <div>
            <h4>
              <span class="text-muted">List</span>
            </h4>
            <ul id='list' class="list-group mb-3">
                
            </ul>
          </div>
          <div class="col-md-7 order-md-1">
            <form class="needs-validation row-form">
              <div class="mb-3">
                <label for="nazov">Name</label>
                <input id="f-name" type="text" class="form-control" placeholder="name" required>
              </div>
              <hr class="mb-4">
              <button>Submit</button>
            </form>
          </div>     
        </div>
      </main>

Answer 1

要使用图像(按钮)对那些动态添加的列表项重新排序，我们设置了 click处理程序首先选择其父容器，因为这些图像也是动态添加的!

$('#list').on('click', '.downArrow', function(e) {

然后我们使用insertAfter()向下移动或insertBefore()上移其在列表中的位置。

$(document).ready(function(){
	$(".p-title").hide().fadeIn(1500);
	const nameInput = document.querySelector('#f-name');
	nameInput.focus();
	
	$('form').on('submit', e=>{
		e.preventDefault(); 
		let name = nameInput.value; 
		addItem(name);
	})
	let addItem = (name)=>{
		$('#list').append('<li>'+name+'<img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Green_Arrow_Up_Darker.svg" class="upArrow"/ width="16"><img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Red_Arrow_Down.svg" width="16" class="downArrow"/</li>');
		nameInput.value = '';
		nameInput.focus();
	}
  
$('#list').on('click', '.downArrow', function(e) {
var curLi = $(this).closest('li');
var tarLi = curLi.next('li');
curLi.insertAfter(tarLi);
});

$('#list').on('click', '.upArrow', function(e) {
var curLi = $(this).closest('li');
var tarLi = curLi.prev('li');
curLi.insertBefore(tarLi);
});



});

body{
font-size:1.2em;
}
li:last-child img.downArrow,li:first-child  img.upArrow{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container">
        <div class="row">
          <div>
            <h4>
              <span class="text-muted">List</span>
            </h4>
            <ul id='list' class="list-group mb-3">
                
            </ul>
          </div>
          <div class="col-md-7 order-md-1">
            <form class="needs-validation row-form">
              <div class="mb-3">
                <label for="nazov">Name</label>
                <input id="f-name" type="text" class="form-control" placeholder="name" required>
              </div>
              <hr class="mb-4">
              <button>Submit</button>
            </form>
          </div>     
        </div>
      </main>

[更新]通过更改样式以隐藏边缘上的按钮来优化答案...这比使用 jQuery 更好。感谢@bhoodream评论