未捕获的TypeError：无法读取undefined的'hasClass'属性

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.net/nimsson/5fW2Z/12/. The error occurs in

我需要在'onClick'监听器中读取所选列表项的类。这个元素与按钮有关，因为我有多个实例（测试中的测验项）。我尝试在http://jsfiddle.net/nimsson/5fW2Z/12/中这样做。发生错误

$("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

html hiearchy是

<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.

我做错了什么？我确实相信我的正确性是正确的。

2 个解决方案

#1

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:

您有错误的选择器，用于在下一个按钮点击事件中定位所选的li您不需要将对象转换为javascript对象，因为您需要使用.hasClass（）方法。您也可以缩小选择器以使用.closest（）而不是多次使用.parent（）。使用：

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

Working Demo

工作演示

#2

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

$（this）.parent（）。parent（）。children（“ul.answers li.selected”）[0]返回一个dom元素，而不是一个没有hasClass（）方法的jQuery对象。

所以

$(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')

如果你有超过1个元素与li.selected选择器只有你必须使用eq（）否则你可以说.children（“ul.answers li.selected”）。hasClass（'correct'）

#1

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