jQuery .load to load SOME of the contents of a div from another page

Question

I'd like to create a module that, based on user interaction, will show products from product category using the jquery.load method.

I can make the target div load the entire contents of the product list from the product page, but is there a way to limit the number of child elements of the remote (so to speak) div to, say, 8?

Put simply:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".cat1").click(function() {
alert('click');
jQuery(".loadhere").load("cat1.php #product_list", function() { alert('loaded') }
);
})
});
</script>

I would like this to just load the first 8 div's found within #product_list — is this possible?

Answer 1

I would suggest changing your code to use ajax and then handling the response yourself in the callback. Something like this:

$(data).find("#product_list .product").slice(0,9).appendTo(".loadhere");