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:

When the user reaches the last but one question when clicks continue, i want to hide that button and show send button.
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

You might like to consider proper buttons instead of divs - demo. — Roamer-1888
– Roamer-1888, Commented Oct 13, 2015 at 23:08

Artur Filipiak · Accepted Answer · 2015-10-13 19:59:47Z

2

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

edited Oct 13, 2015 at 19:59

answered Oct 13, 2015 at 19:21

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sandrina-p Over a year ago

Thank you so much! What is the meaning of "!" ? Is it like "!important" in css?

Artur Filipiak Over a year ago

@SandrinaPereira, no, ! here is used for something else (to determine whether the condition is falsy). stackoverflow.com/a/3755630/962734

Collectives™ on Stack Overflow

Target certain div / li with css attribute with JQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related