I need to refactor the javascript code(make it better, and smaller)

Question

I have an html with this structure

<table id="position_holder">
    <tr>
        <td><a href="#">link1</a>
            <div class="question">question1</div>
            <div class="question">question2</div>
        </td>
    </tr>
    <tr>
        <td><a href="#">link2</a>
            <div class="question">question3</div>
            <div class="question">question4</div>
            <div class="question">question5</div>
            <div class="question">question6</div>
        </td>
    </tr>
</table>

and css makes div.question hidden and i have a javascript witch need to become shoter(refract)

$('#position_holder td a').on('click', function() {
    if (!$(this).next('.question').text()) {
        alert('No test yet!');
    } else if (confirm($(this).next('.question').text())) {
        if (!$(this).next('.question').next('.question').text()) {
            alert('TestSuccess!');
        } else if (confirm($(this).next('.question').next('.question').text())) {
            if (!$(this).next('.question').next('.question').next('.question').text()) {
                alert('TestSuccess!');
            } else if (confirm($(this).next('.question').next('.question').next('.question').text())) {
                if (!$(this).next('.question').next('.question').next('.question').next('.question').text()) {
                    alert('TestSuccess!');
                } else if (confirm($(this).next('.question').next('.question').next('.question').next('.question').text())) {
                    if (!$(this).next('.question').next('.question').next('.question').next('.question').next('.question').text()) {
                        alert('TestSuccess!');
                    } else if (confirm($(this).next('.question').next('.question').next('.question').next('.question').next('.question').text())) {
                        if (!$(this).next('.question').next('.question').next('.question').next('.question').next('.question').next('.question').text()) {
                            alert('TestSuccess!');
                        } else if (confirm($(this).next('.question').next('.question').next('.question').next('.question').next('.question').next('.question').text())) {
                            alert('Test Success!');
                        } else {
                            alert('Test Faluture');
                        }
                    } else {
                        alert('Test Faluture');
                    }
                } else {
                    alert('Test Faluture');
                }
            } else {
                alert('Test Faluture');
            }
        } else {
            alert('Test Faluture');
        }
    } else {
        alert('Test Faluture');
    }
    return false;
});

This take a question one by one to user, first checkes if there is more questions, then if he select "chancel" the test over with falture alert, if he select ok, he pass to the next question

Please help me to do this more convinient way, i think this code is terrible!

Answer 1

Use this. This is basically doing the same thing as the code in question will fewer characters.

$('#position_holder td a').on('click', function() {
    if (!$(this).next('.question').text()) {
        alert('No test yet!');
    } else {

        var $questions = $(this).closest('td').find('.question');
        var questionCount = $questions.length;

        var count = 0;
        // Loop through all the questions
        $questions.each(function() {
            if (confirm($(this).text())) {
                if (++count === questionCount)
                    alert('TestSuccess!');
            } else {
                alert('Test Failure!');
                return false; // will break out of `each`
            }
        });
    }
});

Answer 2

You can do something like this:

$('#position_holder td a').on('click', function(){
    var question = $(this).next('.question');

    // check if the question has text
    if(!question.text()){
        alert('No test yet!');
        return;
    }

    // loop until test success or test failure
    while(true) {

        // confirm current question
        if(confirm(question.text())) {

            // take next question
            question = question.next('.question');

            // success if no text
            if(!question.text()){
                alert('TestSuccess!');
                break;
            }

            // continue if there is text
            continue;
        }

        // stop if confirm was canceled
        alert('Test Faluture');
        break;
    }
});

Demo: http://jsfiddle.net/9xknufsq/1/

Answer 3

Hello i Cant find the #position_holder li in your html but here is the i have created script base on your HTML

$('table a').on('click', function () {
    $(this).parents("td").find(".question").each(function (index) {
        if(!confirm($(this).text())){
           alert('Test Failure');
           return false;
        }else{
           alert('Test Success !');
        }
    });
    return false;
});

WORKING DEMO http://jsfiddle.net/patelmit69/1gm7wj51/6/