Set specific div / li with css attribute using jQuery

Question

I wonder if I can target to diva specific class or pseudo. I think the answer may be some " if else", but I'm not sure how to do this.

I am working on some forms that are shown by the steps that users navigate with the continueand buttons back.

"Steps" are separated by a symbol ol li. After that, I have a 3 "button": back, continueand 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>

CSS is lihidden except for those that have .li-visible- the one that the user sees.

 li {
   display: none;
 }

 .li-visible {
   display: block;
 }

JQuery, continue removeClass('li-visible') li, , next, . back, , 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');
});

. :

• , continue, send.

• back , .

P.S.
4 , , 3 99 .

JSfiddle

Answer 1

:first-child :last-child

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

(: .hide() .show() .css(...))

JSFiddle

---

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