The page I'm trying to load is something like this (although, the number of paragraphs with the class "text" is different every time):
<html>
<body>
<div id="container">
<p class="text">1</p>
<p class="text">2</p>
<p class="text">3</p>
<p class="text">4</p>
<p class="text">5</p>
<p class="text">6</p>
<p class="text">7</p>
<p class="text">8</p>
<p class="text">9</p>
<p class="text">10</p>
<p class="text">11</p>
<p class="text">12</p>
<p class="text">13</p>
<p class="text">14</p>
<p class="text">15</p>
<p class="text">16</p>
<p class="text">17</p>
<p class="text">18</p>
<p class="text">19</p>
<p class="text">20</p>
<p class="sometext">Some other text here</p>
</div>
</body>
</html>
Is it possible to load only the first ten paragraphs with jQuery with something like $('#text').load('other_file.html #container .p');?
The page I'm trying to load is something like this (although, the number of paragraphs with the class "text" is different every time):
<html>
<body>
<div id="container">
<p class="text">1</p>
<p class="text">2</p>
<p class="text">3</p>
<p class="text">4</p>
<p class="text">5</p>
<p class="text">6</p>
<p class="text">7</p>
<p class="text">8</p>
<p class="text">9</p>
<p class="text">10</p>
<p class="text">11</p>
<p class="text">12</p>
<p class="text">13</p>
<p class="text">14</p>
<p class="text">15</p>
<p class="text">16</p>
<p class="text">17</p>
<p class="text">18</p>
<p class="text">19</p>
<p class="text">20</p>
<p class="sometext">Some other text here</p>
</div>
</body>
</html>
Is it possible to load only the first ten paragraphs with jQuery with something like $('#text').load('other_file.html #container .p');?
4 Answers
Reset to default 6Use the :lt() selector. It's 0-based so p:lt(10) should load the first 10 p elements.
$('#text').load('other_file.html #container p:lt(10)');
Keep in mind the whole response is still being downloaded, only a subsection is displayed via the selector.
You probably want to use the :lt() selector:
$('#text').load('other_file.html #container p:lt(10)');
try using the :lt() selector
http://api.jquery./lt-selector/
$('#text').load('other_file.html #container p:lt(10)')
You can use a CSS3-style selector to only load the first 10 elements:
$('#text').load('other_file.html #container .p:nth-child(-n+10)');
This will load the first 10 p elements within the #container element.
Docs: http://api.jquery./nth-child-selector/ (Note that nth-child starts at one, not zero)