Добавление в ul до привязки тега

Question

Я динамически создаю список года, и я усекаю список и показываю ссылку «показать больше» и «показать меньше» после списка лет. Если я append лет до ul, наступают годы после ссылок «показать больше/меньше», и если я дамлет, они показывают перед ссылками «показывать больше/меньше», но в обратном порядке.

Есть ли способ для меня добавить годы в 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"> 
 
\t <a class="btn-more" href="#"><span>+</span> More</a> 
 
\t <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 --> 
 
\t <a class="btn-more" href="#"><span>+</span> More</a> 
 
\t <a class="btn-less" href="#"><span>-</span> Less</a> 
 
</ul>

К сожалению, если формулировка запутанным, дайте мне знать, если мне нужно уточнить больше.

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-формате.

Fiddle: 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"> 
 
\t 
 
</ul> 
 
<a class="btn-more" href="#"><span>+</span> More</a> 
 
<a class="btn-less" href="#"><span>-</span> Less</a>