Question

我正在动态构建年份列表，我正在截断列表并显示＆＃34;显示更多＆＃34;并且＆＃34;显示较少＆＃34;在年份列表之后链接。如果我append到ul的年份，那么这些年过去了＆＃34;显示更多/更少＆＃34;链接，如果我prepend年，他们会在＆＃34;显示更多/更少＆＃34;之前显示。链接，但顺序相反。

我有没有办法将这些年份附加到ul，但是按照时间顺序将它们附加到＆＃34;显示更多/更少＆＃34;链接？

＆＃13;

$(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>'); 
});

＆＃13;

<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>

＆＃13;

对不起，如果措辞令人困惑，请告诉我是否需要澄清更多内容。

Answer 1

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

中直接<ul>无效

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将元素添加到开头。您的示例中显示的越来越少的链接显示在年份列表上方，因为追加在这些链接之后附加了年。前置的原因是以相反的顺序显示年份是因为你在2014年之前，然后在2014年之前预先设置2015年，等等。

您应该在列表外部显示更多/更少的链接，并使用追加。这将使这些年有序，并且还确定您不应将a元素放在ul内。资料来源：http://w3c.github.io/html/grouping-content.html#the-ul-element

＆＃13;
＆＃13;
$(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>'); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

在锚标记之前附加到ul

2 个答案: