Limit JQuery böylece HTML kodu sadece sınırlı sayıda gösterir

Question

Bir sayfada aşağıdaki HTML koduna sahibim ve her besleme öğesinden sonra küçük bir html parçası eklemeye çalışıyorum. Ancak, çok sayıda feed öğesi var ancak yalnızca html'nin yalnızca üç kez gösterilmesini istiyorum.

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

Ne ben her besleme öğesinden sonra html bir parça eklemek için kullanıyorum JQuery kodudur. İyi çalışıyor ama bunu değiştirmenin bir yolunu bulmaya çalışıyorum, bu yüzden html sadece üç kez gösteriyor.

$(function() { 

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

Answer 1

Hemen elemanları üzerinde ilerlerken ve sonra döngü oluştu kaç kez karşı sert bir kontrolü yap.

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

Bu, elde etmeye çalıştığınız şey olduğunu düşünüyorum.