Question

I have multiple divs on a page and in a certain div there are more child divs that get floated to go across the page. I want to be able to use javascript to see the width of the window and then divide my set width of the divs to work out how many to display.

I have found the 2 pieces of code. One that measures window width and the other to slice the divs and hide the rest.

$('div').slice(4).hide();



var width = $(window).width();
$(window).resize(function(){
   if($(this).width() != width){
      width = $(this).width();
       console.log(width);
       alert(width);
   }
});

My Problem is how to select only the divs within my speciedfied div. I have tried this but it hasn’t worked. Don’t even know if i’m goin in the right direction

$("#mainContent2").append(('div').slice(4).hide());

Is javascrpt the right way to go about this or would css be able to do what I’m after?

Many Thanks

EDIT: HTML

<div id='mainContent>
<p></p>
<div>
<div id='mainContent2'>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
</div>

Answer 1

If you have got the number of div to show in particular div then you can use this code.

 $(#mainconetent2 > div).slice(4).hide());