How to Populate HTML page from external page divs content using jquery or js

Question

I have a webpage which will display only the 3 first articles for each section (Politics, economy etc.) in the dedicated grid for each section, Also the content HTML pages are external (politics.html, economy.html etc) These external pages are updated by an external app and contains hundreds of articles (divs) as latest is the first on top of page. So in my index.php page i want to put a grid for each category that displays only the 3 latest articles fro each category, here's my code for index.php :

<div class="POLSection">
    <div class="Article" id="ArtPOL1>
        <span class="ArticleTitle"></span>
    </div>
    <div class="Article" id="ArtPOL2>
        <span class="ArticleTitle"></span>
    </div>
    <div class="Article" id="ArtPOL3>
        <span class="ArticleTitle"></span>
    </div>
</div>

<div class="ECOSection">
    <div class="Article" id="ArtECO1>
        <span class="ArticleTitle"></span>
    </div>
    <div class="Article" id="ArtECO2>
        <span class="ArticleTitle"></span>
    </div>
    <div class="Article" id="ArtECO3>
        <span class="ArticleTitle"></span>
    </div>
</div>

And this is my code for the external content pages, for example politics.html :

<div id="artpol10">
    <span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol9">
    <span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol8">
    <span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol7">
    <span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol6">
    <span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol5">
    <span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
etc. ..............

in this case i tried to load on index.php grid for politics section lates articles so 10, 9 and 8 to display them when page load ... I tried with jquery.load but the problem is it needs the exact 3 IDs and in my case the IDs latest changes every time the app update the articles page, so it could be 10,9,8 or 11,10,9 or 23,22,21

What the best way to do this if it's not .load

Is there a way to do this by selecting nth child with jquery or js, so i can choose 1st, 2nd and 3rd child ?

Thanks.

Answer 1

if you can change the code for the external content pages, then add a class like "article" for the div and then you can use the LT selector on the "article" selection