Javascript 选择页面上具有特定类的最后一个元素

Javascript 选择页面上具有特定类的最后一个元素,javascript,jquery,Javascript,Jquery,我正在做测验。我想选择页面上具有特定类的最后一个元素,这样当用户单击它时,测验结果就会出现。现在我正在通过添加一个额外的类来实现这一点,但我想知道是否有一种方法可以在不使用类的情况下遍历文档,这样无论有多少问题被添加到测验中,函数都会在单击最后一个元素时被触发。我尝试了和建议的解决方案,但似乎不起作用。谢谢 我为它创建了以下 //get total of questions var $questionNumber = $('h2').length; console.log($questi

我正在做测验。我想选择页面上具有特定类的最后一个元素,这样当用户单击它时,测验结果就会出现。现在我正在通过添加一个额外的类来实现这一点,但我想知道是否有一种方法可以在不使用类的情况下遍历文档,这样无论有多少问题被添加到测验中,函数都会在单击最后一个元素时被触发。我尝试了建议的解决方案,但似乎不起作用。谢谢

我为它创建了以下

    //get total of questions
var $questionNumber = $('h2').length;
console.log($questionNumber);
//caching final score
var $totalScore=0;

$('li').click(function(){
    //caching variables
    var $parent = $(this).parent();
    var $span = $(this).find('.fa');

    //deactivate options on click
     $parent.find('li').off("click");

    //check for .correct class
        //if yes
        if($(this).hasClass('correct')){
            //add .correctAnswer class
            $(this).addClass('correctAnswer');
            //find next span and change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of siblings
            $(this).siblings().addClass('fade');
            //show answer
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.show();
            $toShowFalse.remove();
            //add 1 to total score
            $totalScore+=1;
            //console.log($totalScore);
        }else{
            //add .wrongAnswer class
            $(this).addClass('wrongAnswer').addClass('fade');
            //change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of its siblings
            $(this).siblings().addClass('fade');
            //show wrong Message
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.remove();
            $toShowFalse.show();
            //locate correct and highlight
            $parent.find('.correct').addClass('correctAnswer');
        };
});//end click function

//print Results
function printResult(){
    var resultText = '<p>';
    if ($totalScore === $questionNumber){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+'! </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>This is awesome!</p>');
        $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    }else if($totalScore>=3 && $totalScore < $questionNumber){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+'! </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>So and so...better luck next time</p>');
        $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    }else if ($totalScore<3){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+' </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>No..no...no...you have to try harder</p>');
        $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    }

};//end function

//final score
$('li.last').click(function(){
    //show result after last li is clicked
    var $height = $('.finalResult').height();
        printResult();
        console.log($totalScore)
        $('.finalResult').show();
        $('html, body').animate({ 
       scrollTop: $(document).height()-$height}, 
       1400);   
});
//获取问题总数
变量$questionNumber=$('h2')。长度;
console.log($questionNumber);
//缓存最终分数
var$totalScore=0;
$('li')。单击(函数(){
//缓存变量
var$parent=$(this.parent();
var$span=$(this.find('.fa');
//单击可停用选项
$parent.find('li').off('click');
//检查是否有错误。正确的类别
//如果有的话
if($(this).hasClass('correct')){
//添加.正确答案类
$(this.addClass('correctAnswer');
//查找下一个跨度并更改图标
$span.removeClass('fa-square-o')。addClass('fa-check-square-o');
//减少同级的不透明度
$(this.sides().addClass('fade');
//作答
var$answerReveal=$parent.next('.answerReveal').show();
var$toShowCorrect=$answerReveal.find('.quizzAnswerC');
var$toShowFalse=$answerReveal.find('.quizzAnswerF');
$toShowCorrect.show();
$toShowFalse.remove();
//总分加1
$totalScore+=1;
//log($totalScore);
}否则{
//添加错误答案类
$(this.addClass('errorresponse').addClass('fade');
//更改图标
$span.removeClass('fa-square-o')。addClass('fa-check-square-o');
//减少其同级的不透明度
$(this.sides().addClass('fade');
//显示错误消息
var$answerReveal=$parent.next('.answerReveal').show();
var$toShowCorrect=$answerReveal.find('.quizzAnswerC');
var$toShowFalse=$answerReveal.find('.quizzAnswerF');
$toShowCorrect.remove();
$toShowFalse.show();
//找到正确的位置并突出显示
$parent.find('.correct').addClass('correctAnswer');
};
});//结束点击功能
//打印结果
函数printResult(){
var resultText='';
如果($totalScore==$questionNumber){
resultText+=“你从“+$questionNumber+”中获得了“+$totalScore+”!

”; $('.resultContainer').append(resultText); $(“#半文本”).append(“这太棒了!

”); $('#半图像')。附加(''); } };//端函数 //总分 $('li.last')。单击(函数(){ //单击最后一个li后显示结果 变量$height=$('.finalResult').height(); printResult(); console.log($totalScore) $('.finalResult').show(); $('html,body')。设置动画({ scrollTop:$(文档).height()-$height}, 1400); });
使用jQuery获取给定类的最后一个元素非常简单:

$('selector').last().click(...);

可以使用以下命令选择具有类的最后一个元素:

  $( ".classname:last-child" ).click(function(){});

DOM是什么样的?给定类的最后一个元素不一定总是最后一个子元素。