Target certain div / li with css attribute with JQuery

Question

I wonder if I can target a div with certain class or pseudo. I think the answer could be some "if else" but I'm not sure how to do that.

I'm working on some forms that are showed by steps that the users navigates with continue and back buttons.

The "steps" are separated by ol li. After that, I have 3 "buttons": back, continue and send.

<section class="modal-questions">
        <form id="form001" name="form001" method="post">
            <div class="modal-questions-list">
                <ol>
                    <!-- question 01 -->
                    <li class="li-visible">
                        <h4>Question 01</h4>
                        <input id="opt1a" type="radio" name="Q1" value="1">
                        <label for="opt1a">Options</label>
                    </li>

                    <!-- question 02 -->
                    <li>
                        <h4>Question 02</h4>
                        <input id="opt2b" type="radio" name="Q2" value="1">
                        <label for="opt2b">Options</label>
                    </li>

                    <!-- question 03 -->
                    <li>
                        <h4>Question 0</h4>
                        <input id="opt3b" type="radio" name="Q3" value="1">
                        <label for="opt3b">Options</label>
                    </li>

                    <!-- question 04 -->
                    <li>
                        <h4>Question 04</h4>
                        <input id="opt4b" type="radio" name="Q4" value="1">
                        <label for="opt4b">Options</label>
                    </li>
                </ol>
            </div>
        </form>
    </section>

    <section class="modal-bottom">
        <div class="X-button-flat" id="prevStep">
            Back
        </div>
        <br />
        <div class="X-button-small s-button-orange" id="nextStep">
            Continue
        </div>

        <div class="X-button-small s-button-orange" id="finalStep">
            Send
        </div>
    </section>

In CSS, li are hidden except the one that has .li-visible - the one that user is seeing.

 li {
   display: none;
 }

 .li-visible {
   display: block;
 }

With JQuery, when the user clicks continue I removeClass('li-visible') to the li that has it, and add it to the next one to show it to the user. And when the user clicks back I do the same but to the previous li.

$('.modal-bottom').on('click', '#nextStep', function() {
    $('li.li-visible').removeClass('li-visible').next().addClass('li-visible');
    $('#prevStep').css({'opacity':'1'});
});

$('.modal-bottom').on('click', '#prevStep', function() {
    $('li.li-visible').removeClass('li-visible').prev().addClass('li-visible');
});

So far so good. Now the problems:

1. When the user reaches the last but one question when clicks continue, i want to hide that button and show send button.

2. When the users clicks back in the second question, I want to hide that button.

P.S.
In this example there are 4 Questions, but the form doesn't has a fixed number of questions, so it has to work in 3 or 99 questions.

There is the JSfiddle

Answer 1

You can use :first-child and :last-child selectors

$('#prevStep, #finalStep').hide();

$('.modal-bottom').on('click', '#nextStep', function() {
    var i = $('li.li-visible').removeClass('li-visible').next().addClass('li-visible');
    if(i.is(':last-child')){
        $(this).hide();
        $('#finalStep').show();
    }
    $('#prevStep').show();
});

$('.modal-bottom').on('click', '#prevStep', function() {
    var i = $('li.li-visible').removeClass('li-visible').prev().addClass('li-visible');
    if(!i.is(':last-child')){
        $('#nextStep').show();
        $('#finalStep').hide();
    }
    if(i.is(':first-child')){
        $(this).hide();
    }
});

(Note: I have used .hide() and .show() methods instead of .css(...))

JSFiddle demo

---

Or a bit more compact solution, with .toggle(display):

$('.modal-bottom').on('click', '#nextStep', function() {
    var i = $('.li-visible').removeClass('li-visible').next().addClass('li-visible').is(':last-child');
    $(this).toggle(!i);
    $('#finalStep').toggle(i);
    $('#prevStep').show();
});

$('.modal-bottom').on('click', '#prevStep', function() {
    var i = $('.li-visible').removeClass('li-visible').prev().addClass('li-visible').is(':last-child');
    $('#nextStep').toggle(!i);
    $('#finalStep').toggle(i);
    $(this).toggle(!$('li.li-visible').is(':first-child'));
});

JSFiddle demo