javascript - ul 中的交换列表和事件元素位置保持不变

Question

我是脚本新手。 有人可以帮我交换 ul 中的 li 工作场景是: 1.当用户点击 anchor 标签时，它应该出现在中间意味着事件位置(事件元素应始终位于中心位置)。 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>