jQuery: Check if two classes exist per div
<p>I have two questions per <code>div</code> (page) that look like this:</p>

<pre><code>&lt;div id="page5" class="page" style="display:none;"&gt;
                    &lt;div class="question"&gt;
                        &lt;h3&gt;9. You are trying to remember a pin number, what are you most likely?&lt;/h3&gt;
                        &lt;ul class="abc Clearfix"&gt;
                            &lt;li&gt;
                                &lt;span&gt;
                                    &lt;a class="a" href="javascript:void(false);"&gt;
                                        &lt;span class="letter"&gt;A&lt;/span&gt;
                                        &lt;span class="image"&gt;&lt;/span&gt;
                                        &lt;span class="title"&gt;Imagine the numbers in your head&lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/span&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;
                                    &lt;a class="b" href="javascript:void(false);"&gt;
                                        &lt;span class="letter"&gt;B&lt;/span&gt;
                                        &lt;span class="image"&gt;&lt;/span&gt;
                                        &lt;span class="title"&gt;Repeat the numbers out loud&lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/span&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;
                                    &lt;a class="c" href="javascript:void(false);"&gt;
                                        &lt;span class="letter"&gt;C&lt;/span&gt;
                                        &lt;span class="image"&gt;&lt;/span&gt;
                                        &lt;span class="title"&gt;Try out the pattern of the numbers on a keypad&lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/span&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;div class="question"&gt;
                        &lt;h3&gt;10. How would you tell if a friend was upset?&lt;/h3&gt;
                        &lt;ul class="abc Clearfix"&gt;
                            &lt;li&gt;
                                &lt;span&gt;
                                    &lt;a class="a" href="javascript:void(false);"&gt;
                                        &lt;span class="letter"&gt;A&lt;/span&gt;
                                        &lt;span class="image"&gt;&lt;/span&gt;
                                        &lt;span class="title"&gt;Notice the expression on their face&lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/span&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;
                                    &lt;a class="b" href="javascript:void(false);"&gt;
                                        &lt;span class="letter"&gt;B&lt;/span&gt;
                                        &lt;span class="image"&gt;&lt;/span&gt;
                                        &lt;span class="title"&gt;Listen to what they say&lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/span&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;
                                    &lt;a class="c" href="javascript:void(false);"&gt;
                                        &lt;span class="letter"&gt;C&lt;/span&gt;
                                        &lt;span class="image"&gt;&lt;/span&gt;
                                        &lt;span class="title"&gt;Pick up on their body language&lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/span&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
</code></pre>

<p>I have some jQuery code that allows the user to select a link per question (they can ONLY choose one per question). Their are a total of 5 pages that the user can navigate across using a next and previous set of links. What I want to do is check that a div with the class of page has two classes of selected on its links, otherwise show an alert when the user tries to click a button.</p>

<p>The code to do the selects on the options.</p>

<pre><code>$(".abc li a").click(function ()
{
    var selected = $(this).hasClass('selected');
    $(this).closest('ul.abc').find('li a').removeClass('selected');
    if (!selected)
        $(this).addClass('selected');
});
</code></pre>

<p>The navigation buttons used to jump between pages:</p>

<pre><code>&lt;div class="page-navigation Clearfix"&gt;
                                &lt;a id="quiz-prev" class="Prev" href="javascript:void(false);" style="display:none;"&gt;
                                    &lt;span&gt;Prev&lt;/span&gt;
                                &lt;/a&gt;
                                &lt;a id="quiz-next" class="Next" href="javascript:void(false);"&gt;
                                    &lt;span&gt;Next&lt;/span&gt;
                                &lt;/a&gt;
                                &lt;a id="quiz-finish" class="Finish" href="javascript:void(false);" style="display:none;"&gt;
                                    &lt;span&gt;Finish&lt;/span&gt;
                                &lt;/a&gt;
                            &lt;/div&gt;
</code></pre>

<p>and the code for the next button:</p>

<pre><code>   $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });
</code></pre>

<p>So if a user was on <code>page1</code> and had only clicked one option ie. only one link had a class of selected then when they clicked the next link it would show an alert saying 'Please fill out all questions'. <strong>Note: I have already added code to hide and show the buttons based on what page they are looking at so don't need to do that</strong></p>

<p>Also when the user reaches the last page, a finish button appears so it needs to check the user has selected 10 options, so need to either count the classes or something similar. Cheers again for all who can help.</p>

<p>Can anyone help? Thanks.</p>

<p><strong>EDIT: Here is my attempt to show an alert if two options have not been clicked. But it shows the alert all the time</strong></p>

<pre><code>$('#quiz-next').click(function ()
{
    var allOK = true;
    $('div.page &gt; div.question').each(function () {
        allOK = allOK &amp;&amp; $('a.selected', this).length == 1;
        return allOK;
    });

    if (allOK == false)
    {
        alert("Please fill in all questions");
    }
    else {
        $(".page:visible").hide().next().show();
    }
});
</code></pre>
