Select last element on page with specific class

Question

I am working on a quizz test. I want to select the last element on the page with a specific class so that when the user clicks on it the result of the quizz appears. Right now I'm doing it by adding an extra class but I wanted to know if there's a way of traversing the document without the use of classes so that no matter how many questions are added to the quizz the function will be triggered when the last element is clicked. I tried the solutions suggested here and here but it doesn't seem to work. Thanks

I created the following codepen for it

    //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);   
});

score 2 · Accepted Answer · answered Mar 21 '15 at 12:06

2

Getting the last element with a given class is very straightforward with jQuery:

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

answered Mar 21 '15 at 12:06

Etheryte

24,589
11
71
116

score -1 · Answer 2 · edited Mar 21 '15 at 12:48

-1

you can select last element with class using:

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

edited Mar 21 '15 at 12:48

dippas

58,591
15
114
126

answered Mar 21 '15 at 12:08

Vishal Wadhawan

1,085
1
9
11

The last element with a given class isn't always necessarily the last child. – Etheryte Mar 21 '15 at 12:08

Select last element on page with specific class

2 Answers2