Question

My question is: how do I make array of specific items within a pager and select specific class
This is my next/previous (pager) html code:

<div class="item-list">
<ul class="pager" style="display: none;">
<li class="pager-current">1</li>
<li class="pager-item">
<a class="active" title="Go to page 1" href="/challenges?page=1">2</a>
</li>
<li class="pager-next">
<a class="active" title="Go to next page" href="/challenges?page=2">next ›</a>
</li>
<li class="pager-last">
<a class="active" title="Go to last page" href="/challenges?page=3">last »</a>
</li>
</ul>
</div>

A pager looks like this: <— previous 1 2 3 next —> where you can go to next page.

I want to loop thru all pages 1 – 100.

Select each page, get the content and make a array of all elements with <div class="items"> but only only the ones that has a class included named <div id="allowed"></div>

The page content:

<div class="wrapper">
  <div class="items">
    <div class="title"></div>
    <div class="body"></div>
    <div class="link"></div>
    <div class="allowed"></div>
  </div>
</div>
 <div class="wrapper">
  <div class="items">
    <div class="title"></div>
    <div class="body"></div>
    <div class="link"></div>

  </div>
</div>

Now is the element with the allowed class only be inserted into the array, and the other one ignored.

Answer 1

This is how you make an array with the items that have a child which contains an element which has the class allowed. Is this what you were looking for?

var $items = $("div.items");
var yourArray;

$.each($items,function(){
   if($(this).children(".allowed").length){
       yourArray.push($(this));
   }  
});