UL和主动项目位置中的交换列表保持不变

Question

我是脚本新手。有人可以帮我在UL中交换Li吗工作场景是： 1.当用户单击锚标记时，它应该出现中间表示活动位置（活动项目应始终处于中心位置）。 2.列表可能没有按任何顺序为顺序。

var swapElements = function(siblings, subjectIndex, objectIndex) {
  // Get subject jQuery
  var subject = $(siblings.get(subjectIndex));
  // Get object element
  var object = siblings.get(objectIndex);
  // Insert subject after object
  subject.insertAfter(object);
}
$(function() {
  swapElements($('li'), 0, 1);
});

ul li {
  float: left;
  display: inline-block;
  list-style: none;
}
ul li a {
  color: #000;
  text-decoration: none;
  padding: 15px;
  display: block;
}
ul li.active a {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a class="nav-item" href="#"><span>Quality</span></a></li>
  <li><a class="nav-item" href="#"><span>Safety</span></a></li>
  <li class="active"><a class="nav-item" href="#"><span>People</span></a></li>
  <li><a class="nav-item" href="#"><span>Cost</span></a></li>
  <li><a class="nav-item" href="#"><span>Delivery</span></a></li>
</ul>

我试图更改代码，但没有运气。.谁能帮助我解决我的问题。预先感谢..

Answer 1

请考虑以下代码，并提供说明的注释。如果您不明白的话，请评论。

	$(document).ready(function() {
		function change() {
			// 1. remove active class from currently active component
			$('.active').removeClass('active');
			// 2. get html inside of the list element
			var htm = $(this).html();
			// 3. remove the list element
			$(this).remove();
			// 4. add a new list element after the 2nd child or (n /2)th child
			$('li:nth-child(2)').after('<li class="active">' + htm + '</li>');
			// 5. bind the change method to clicking of this new element
			$('li:nth-child(3)').click(change);
		}
		// when a list element is clicked, call the change function
		$('li').click(change);
	});

    ul li {
      float: left;
      display: inline-block;
      list-style: none;
    }
    ul li a {
      color: #000;
      text-decoration: none;
      padding: 15px;
      display: block;
    }
    ul li.active a {
      color: red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
      <li><a class="nav-item" href="#"><span>Quality</span></a></li>
      <li><a class="nav-item" href="#"><span>Safety</span></a></li>
      <li class="active"><a class="nav-item" href="#"><span>People</span></a></li>
      <li><a class="nav-item" href="#"><span>Cost</span></a></li>
      <li><a class="nav-item" href="#"><span>Delivery</span></a></li>
</ul>