jQuery: Check if two classes exist per div

Question

I have two questions per div (page) that look like this:

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

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.

The code to do the selects on the options.

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

The navigation buttons used to jump between pages:

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

and the code for the next button:

   $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });

So if a user was on page1 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'. 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

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.

Can anyone help? Thanks.

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

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

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

Tomas Aschan · Accepted Answer · 2011-08-10 10:31:54Z

1

So, basically what you need to do is this:

In a <div class="page">, you have several <div class="question">. On a triggered event, you want to make sure that each question div has exactly one <a class="selected"> before proceeding.

The following code should be able to do that:

var allOK = true;
$('div.page > div.question').each(function() {
    allOK = allOK && $('a.selected', this).length == 1;
    return allOK; // if false, we don't need to check the rest
});

After running this code, allOK tells you if you're good to go or not. It seems to work, at least =) (You'll have to put the select classes there manually...)

Note: this will check for all <div class="page"> that are currently rendered (which seems to be what you want for the last page). To just check a single div at a time, you'll have to change the div.page selector to something uniquely identifying that specific div - with your sample code, you could for example use #page5 instead.

edited Aug 10, 2011 at 10:31

answered Aug 10, 2011 at 9:49

Tomas Aschan

61.1k62 gold badges266 silver badges423 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Cameron Over a year ago

There are two question divs per page. And each question can only have two options (selected states on their links) This part is handled already. But I want to make it so that the user MUST have selected two options before the next link will work and all 10 options before the finish button will work. Instead I want to show an alert saying please complete all questions.

Tomas Aschan Over a year ago

@Cameron: That's exactly what my code helps you do. Have you played around with the jsfiddle?

Cameron Over a year ago

@Thomas Yes I have looked at the JSFiddle, but I'm not sure how to properly use it as I just get an alert saying false...?

Tomas Aschan Over a year ago

@Cameron: I've updated the jsfiddle to demonstrate how to use my code. Please take a look at it.

Tomas Aschan Over a year ago

@Cameron: Sorry, the link to JSFiddle only worked to get the original entry - my updates did not show up. I've now linked to the correct revision, which should give you an idea on how to use it.

|

Collectives™ on Stack Overflow

jQuery: Check if two classes exist per div

1 Answer 1

11 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Related