在定位标记之前附加到ul

Question

我正在动态建立年份列表，并且删节列表并在年份列表之后显示“显示更多”和“显示更少”链接。 如果我append多年来以ul ，几年来经过“显示更多/更少”链接，如果我prepend这些年来，他们之前的“显示更多/更少”链接显示，而是以相反的顺序。

我是否可以通过某种方式将年份附加到ul，然后按时间顺序在“显示更多/更少”链接之前附加年份？

 $(function() { $('.years-append').append('<li><a href="#">2014</a></li>'); $('.years-append').append('<li><a href="#">2015</a></li>'); $('.years-append').append('<li><a href="#">2016</a></li>'); $('.years-append').append('<li><a href="#">2017</a></li>'); $('.years-prepend').prepend('<li><a href="#">2014</a></li>'); $('.years-prepend').prepend('<li><a href="#">2015</a></li>'); $('.years-prepend').prepend('<li><a href="#">2016</a></li>'); $('.years-prepend').prepend('<li><a href="#">2017</a></li>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Appending - Years are in correct order, but more/less links come BEFORE years</h2> <ul class="years-append"> <a class="btn-more" href="#"><span>+</span> More</a> <a class="btn-less" href="#"><span>-</span> Less</a> </ul> <h2>Prepending - more/less links come AFTER years, but years are in reverse order</h2> <ul class="years-prepend"> <!-- These links should come after the list of years, years should be in chronological order --> <a class="btn-more" href="#"><span>+</span> More</a> <a class="btn-less" href="#"><span>-</span> Less</a> </ul> 

抱歉，如果措辞令人困惑，请让我知道是否需要进一步说明。

Answer 1

为什么不更改HTML？ 这是实现您想要的最简单的方法。 而且，您的HTML无效。 直接在<ul>包含<a>是无效的

HTML：

<div>
  <ul class="years-append"></ul>
  <a class="btn-more" href="#"><span>+</span> More</a>
  <a class="btn-less" href="#"><span>-</span> Less</a>
</div>

JavaScript（未修改）：

$(function() {
  $('.years-append').append('<li><a href="#">2014</a></li>');
  $('.years-append').append('<li><a href="#">2015</a></li>');  
  $('.years-append').append('<li><a href="#">2016</a></li>');  
  $('.years-append').append('<li><a href="#">2017</a></li>');
});

说明：开始编写脚本和样式之前，应尝试按逻辑顺序排列HTML。 在这种情况下，我们通过将列表和按钮设置为<div>来标记它们属于在一起。 由于列表应该显示在按钮之前，因此它也在HTML中。

小提琴： https : //jsfiddle.net/8nz3pwtk/

Answer 2

append将元素添加到父元素的末尾，而prepend将其添加到开始。 在示例中，显示越来越少的链接显示在年份列表上方，因为append将在这些链接之后附加年份。 优先显示年份倒序的原因是因为您先设置2014年，然后再设置2015年，然后再将其设置在2014年之前，依此类推。

您应将显示更多/更少链接显示在列表之外，并使用附加。 这将使年顺序，还修复的事实，你不应该把a一个内部元素ul 。 来源： http : //w3c.github.io/html/grouping-content.html#the-ul-element

 $(function() { $('.years-append').append('<li><a href="#">2014</a></li>'); $('.years-append').append('<li><a href="#">2015</a></li>'); $('.years-append').append('<li><a href="#">2016</a></li>'); $('.years-append').append('<li><a href="#">2017</a></li>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="years-append"> </ul> <a class="btn-more" href="#"><span>+</span> More</a> <a class="btn-less" href="#"><span>-</span> Less</a>