jQuery loop steps and add html

Question

Is there a way to simplify the code below? The code counts down as each div is dropped into a container. I have only posted the section of code I would like to simplify. I appreciate any guidance in this.

 if (count === 0) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie gone sr-only'>That was the last question</p>");
    }
    if (count === 1) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There is 1 more question to select</p>");
    }
    if (count === 2) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 2 questions to select</p>");
    }
    if (count === 3) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 3 questions to select</p>");
    }
    if (count === 4) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 4 questions to select</p>");
    }
    if (count === 5) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 5 questions to select</p>");
    }

styopdev · Accepted Answer · 2017-01-11 06:58:04Z

3

$(".ernie").remove();
if (count) {
    $("#choices").append("<p class='ernie sr-only'>There " + (count > 1 ? "are" : "is") + " " + count + " more question" + (count > 1 ? "s" : "") + " to select</p>");
} else {
    $("#choices").append("<p class='ernie gone sr-only'>That was the last question</p>");
}

demo

edited Jan 11, 2017 at 6:58

answered Jan 10, 2017 at 6:40

styopdev

2,6744 gold badges37 silver badges55 bronze badges

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

4 Comments

Rahul Over a year ago

Your code doesn't generate 'are' string for more than 1 count.

Laurence L Over a year ago

Thanks so much everyone for the quick responses and the help. This is really helpful.

Laurence L Over a year ago

I have had to un-accept the answer unfortunately as there is an error in the script. Error generated in testing "Expected ')' and instead saw 'count'".

styopdev Over a year ago

It s working fine for me, you can check here jsfiddle.net/x7t7z7vb

Pooja JaJal · Accepted Answer · 2017-01-10 06:46:51Z

1

var message = "";
message = (count === 0) ? 'That was the last question' : (count === 1 ? 'There is 1 more question to select' : 'There are '+ count +' questions to select');     
$(".ernie").remove();
$("#choices").append("<p class='ernie gone sr-only'>"+message+"</p>");

edited Jan 10, 2017 at 6:46

answered Jan 10, 2017 at 6:41

Pooja JaJal

3031 silver badge4 bronze badges

1 Comment

Rahul Over a year ago

Once check all strings. Your will generate for more than 1 count.

rambo · Accepted Answer · 2017-01-10 06:45:51Z

0

Following is more simple answer. You have to remove .element with .ernie always, so make that common then for zero you have "last" to be added, for others it's just the count. So here is your answer.

$(".ernie").remove();
if(count === 0){
    $("#choices").append("<p class='ernie gone sr-only'>That was the last question</p>");
}else if(count === 1){
    $("#choices").append("<p class='ernie sr-only'>There is 1 more question to select</p>");
}
else if(typeof count === "number" ) {
    $("#choices").append("<p class='ernie sr-only'>There are " + count + " questions to select</p>");
}

edited Jan 10, 2017 at 6:45

answered Jan 10, 2017 at 6:39

rambo

366 bronze badges

Comments

Rahul Patel · Accepted Answer · 2017-01-10 06:48:44Z

0

Please check below optimized snippet.

if(count !== ""){
    $(".ernie").remove();
    var msg = "";
    if(count===0){
        msg = "That was the last question";
    }else if(count===1){
        msg = "There is 1 more question to select";
    }else{
        msg = "There are "+count+" questions to select";
    }
    $("#choices").append("<p class='ernie gone sr-only'>"+msg+"</p>");
}

edited Jan 10, 2017 at 6:48

answered Jan 10, 2017 at 6:40

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

Comments

Akshay · Accepted Answer · 2017-01-10 06:50:00Z

0

it may be helpful

if (count === 0 || count === 1 || count === 2 || count === 3 || count === 4 || count === 5) {
    append(count)
}


countArray = ['That was the last question','There is 1 more question to select','There are 2 questions to select','There are 3 questions to select','There are 4 questions to select','There are 5 questions to select']

function append(count){
     $(".ernie").remove();
     $("#choices").append('<p class="ernie gone sr-only">'+countArray[count]+'</p>');
}

answered Jan 10, 2017 at 6:50

Akshay

8057 silver badges16 bronze badges

Comments

GROVER. · Accepted Answer · 2017-01-10 06:50:08Z

0

You could use a switch statement instead, and also remove .ernie before your if statement (you're just going to remove it anyway).

You can also set the text to append to #choices, rather than typing it out every time, and append on count's value.

var text = "<p class='ernie sr-only'>There " + (count > 1 ? "are " : "is ") + count + " more question to select</p>";

$(".ernie").remove(); // remove ernie anyway
switch(count) {
    case 1: // if count is equal to 1
        $("#choices").append("<p class='ernie gone sr-only'>That was the last question</p>");
       break; 
    case 2: // if count is equal to 2
        $("#choices").append(text);
        break;
    // and so on...
    deafault: // if count is not equal to any of the above numbers
        void(0); // javascript for do nothing
        break;
}

Hope it helps!

edited Jan 10, 2017 at 6:50

answered Jan 10, 2017 at 6:39

GROVER.

4,4082 gold badges31 silver badges78 bronze badges

6 Comments

Rahul Over a year ago

Your code doesn't generate for more than one count.

GROVER. Over a year ago

@VforVendetta what do you mean?

Rahul Over a year ago

There is 1 more question to select, There are 2 questions to select There are two different strings to generate. Do you get me ?

GROVER. Over a year ago

@VforVendetta no I do not... It works perfectly on my end

Rahul Over a year ago

Your string is generating, "There is 1 more question to select" for count 1, and "There is 2 more question to select" for count 2 also. For more clarification, once go through question once, HINT : 'is', 'are'

|

Collectives™ on Stack Overflow

jQuery loop steps and add html

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related