アンカータグの前にulに追加する

Question

私は1年のリストを動的に作成しています。リストを切り捨てて表示し、年のリストの後に「もっと見る」と「少ないものを表示する」リンクを表示しています。もし私がappend年にulになると、年は "より多くの/より少ない"リンクの後に来て、prepend年は "より多くの/少ない"リンクの前に表示されますが、逆の順序です。

年をulに追加するが、「more/less」リンクの前に時間順に追加する方法はありますか？

$(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は有効ではありません。

<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を持参するようにしてくださいそれは<ul>

HTML内で直接<a>を持つことが有効ではありません論理的な順序で。この場合、のリストとボタンは、一緒に属し、<div>に設定します。リストがボタンの前に表示されるので、HTMLのようにもそうです。

フィドル：prependが開始に追加しながらhttps://jsfiddle.net/8nz3pwtk/

Answer 2

appendは、親要素の最後に要素を追加します。あなたの例では、より多くのリンクが表示されるようになりました。なぜなら、appendはの後にのリンクを追加しているからです。前置する理由は、2014年を前に置いてから2014年より前に置くなど、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>