HTMLコードが限られた回数しか表示しないようにJQueryを制限する

Question

私はページに次のHTMLコードを持っており、すべてのフィード項目の後に小さなhtmlを追加しようとしています。しかし、私はフィードの項目がたくさんあるが、3回だけ表示するhtmlが欲しい。

HTML：

<div class="wp_rss_retriever"> 
    <ul class="wp_rss_retriever_list"> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/uncategorized/man-united-ready-to-smash-transfer-record-to-sign-star-striker/" title="Man United ready to smash transfer record to sign star striker">Man United ready to smash transfer record to sign star striker</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 12:29 pm</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/fenerbahce-plan-bid-for-manchester-united-ace-mata/" title="Fenerbahce plan bid for Manchester United ace Mata">Fenerbahce plan bid for Manchester United ace Mata</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 12:15 pm</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/united-arsenal-target-morata-premier-league-would-suit-me/" title="Manchester United, Arsenal target Morata: Premier League would suit me">Manchester United, Arsenal target Morata: Premier League would suit me</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:55 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/manchester-united-rival-arsenal-liverpool-for-juventus-striker-morata/" title="Manchester United rival Arsenal, Liverpool for Juventus striker Morata">Manchester United rival Arsenal, Liverpool for Juventus striker Morata</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:48 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/germany-coach-low-bastian-schweinsteiger-will-make-euros/" title="Germany coach Low: Bastian Schweinsteiger will make Euros">Germany coach Low: Bastian Schweinsteiger will make Euros</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:44 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/toni-kroos-upset-for-schweinsteiger-over-knee-setback/" title="Toni Kroos upset for Schweinsteiger over knee setback">Toni Kroos upset for Schweinsteiger over knee setback</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:39 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/uncategorized/manchester-united-youth-rankings-2016-10-joe-riley/" title="Manchester United Youth Rankings 2016 #10 -Joe Riley">Manchester United Youth Rankings 2016 #10 -Joe Riley</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:38 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/revealed-anthony-martial-matches-ronaldo-goalscoring-exploits/" title="REVEALED: Anthony Martial matches Ronaldo goalscoring exploits">REVEALED: Anthony Martial matches Ronaldo goalscoring exploits</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:34 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/uncategorized/manchester-united-transfer-news-alvaro-morata-jose-mourinho-plan-top-rumours/" title="Manchester United Transfer News: Alvaro Morata, Jose Mourinho Plan, Top Rumours">Manchester United Transfer News: Alvaro Morata, Jose Mourinho Plan, Top Rumours</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:21 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/manchester-united-player-insists-squad-dont-talk-about-van-gaal-speculation/" title="Manchester United player insists squad don&#039;t talk about Van Gaal speculation">Manchester United player insists squad don&#039;t talk about Van Gaal speculation</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 11:10 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/ed-woodwards-right-hand-man-praises-under-fire-manchester-united-manager-louis-van-gaal/" title="Ed Woodward&#039;s right-hand man praises under-fire Manchester United manager Louis van Gaal">Ed Woodward&#039;s right-hand man praises under-fire Manchester United manager Louis van Gaal</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 10:20 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/felipe-anderson-confirms-united-bid/" title="Felipe Anderson confirms United bid">Felipe Anderson confirms United bid</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 9:43 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"><a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/the-race-for-top-four-predictions/" title="The race for top four: Predictions">The race for top four: Predictions</a> 
     <div class="wp_rss_retriever_container"> 
      <div class="wp_rss_retriever_metadata"><span class="wp_rss_retriever_date">Published: March 25, 2016 - 9:39 am</span></div> 
     </div> 
     </div> 
    </li> 
    <li class="wp_rss_retriever_item"> 
     <div class="wp_rss_retriever_item_wrapper"> 
     <a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/bryan-robson-seeks-to-recover-375000-in-lost-investments/" 

これは私がすべてのフィード項目の後のhtmlの部分を追加するために使用していますjQueryのコードです。それはうまく動作しますが、私はそれを変更する方法を見つけるために苦労しているので、htmlは3回しか表示されません。

$(function() { 

    $("<p>Test</p>").insertAfter(".wp_rss_retriever_container"); 
}) 

Answer 1

要素を繰り返し処理して、ループが何回発生したかを確認してください。

$('.wp_rss_retriever_container').each(function(index, element){ 
    if(index < 3){ 
     $(this).after('<p>Test</p>'); 
    } 
}); 

これはあなたが達成しようとしていることだと思います。