I need to read the class of a selected list item in an 'onClick' Listener. This element is relative to the button as I have multiple instances (quiz items on a test). I try to do so in /. The error occurs in

$("ul.quiz div.quizitem div.nav span.next").click(function(e) {
    alert($(this).parent().parent().children("ul.answers li.selected")[0].hasClass("correct") ? "Correct":"Wrong");
});

The html hiearchy is

<ul class="quiz">
        <li>
            <div class="quizitem">
                <div class="question">What is 2+2?</div>
                <br />
                <ul class="answers">
                   <li class="wrong answer">a. 5</li>
                   <li class="wrong answer">b. 2</li>
                   <li class="correct answer">c. 4</li>
                </ul>
                <br />
                <br />
                <div class="nav"><span class="prev">Previous</span><span class="next">Next</span></div>
            </div> 
        </li>
        <li>
            <div class="quizitem">
                <div class="question">What is 2+2?</div>
                <br />
                <ul class="answers">
                   <li class="wrong answer">a. 5</li>
                   <li class="wrong answer">b. 2           </li>
                   <li class="correct answer">c. 4</li>
                </ul>
                <br />
                <br />
                <div class="nav"><span class="prev">Previous</span><span class="next">Next</span></div>
            </div> 
        </li>
    </ul>

What have I done wrong? I do believe that I have the hiearchy correct.

I need to read the class of a selected list item in an 'onClick' Listener. This element is relative to the button as I have multiple instances (quiz items on a test). I try to do so in http://jsfiddle/nimsson/5fW2Z/12/. The error occurs in

$("ul.quiz div.quizitem div.nav span.next").click(function(e) {
    alert($(this).parent().parent().children("ul.answers li.selected")[0].hasClass("correct") ? "Correct":"Wrong");
});

The html hiearchy is

<ul class="quiz">
        <li>
            <div class="quizitem">
                <div class="question">What is 2+2?</div>
                <br />
                <ul class="answers">
                   <li class="wrong answer">a. 5</li>
                   <li class="wrong answer">b. 2</li>
                   <li class="correct answer">c. 4</li>
                </ul>
                <br />
                <br />
                <div class="nav"><span class="prev">Previous</span><span class="next">Next</span></div>
            </div> 
        </li>
        <li>
            <div class="quizitem">
                <div class="question">What is 2+2?</div>
                <br />
                <ul class="answers">
                   <li class="wrong answer">a. 5</li>
                   <li class="wrong answer">b. 2           </li>
                   <li class="correct answer">c. 4</li>
                </ul>
                <br />
                <br />
                <div class="nav"><span class="prev">Previous</span><span class="next">Next</span></div>
            </div> 
        </li>
    </ul>

What have I done wrong? I do believe that I have the hiearchy correct.

• javascript
• jquery
• html
• class
• hierarchy

2 Answers 2

You have incorrect selector for targeting selected li in next button click event. You do not need to convert the object to javascript object as you need to use .hasClass() method. also you can narrow down your selector to use .closest() insteads of using .parent() multiple times.Use:

$(this).closest('.quizitem').find("ul.answers li.selected").hasClass("correct") ? "Correct":"Wrong")

Working Demo

$(this).parent().parent().children("ul.answers li.selected")[0] returns a dom element not a jQuery object which does not have hasClass() method..

So

$(this).parent().parent().children("ul.answers li.selected").eq(0).hasClass('correct')

If you have more than 1 element with li.selected selector only then you have to use the eq() else you can just say .children("ul.answers li.selected").hasClass('correct')