How can I set the current <li> tab in JQuery

Question

So, originally I have this html code which I'm trying to implement the <li> 's to be dynamically added in the <ul>

<ul class="tabs" id="modal_addquestion_ul">
    <li class="tab-link current" data-tab="multipleChoice">Multiple Choice</li>
    <li class="tab-link" data-tab="trueOrFalse">True or False</li>
    <li class="tab-link" data-tab="fillInTheBox">Fill in the Box</li>
</ul>

The current tab is set to Multiple Choice.

Now, I create a method in JQuery to dynamically add the <li> 's to the <ul> Data is from the database I created.

function loadQuestionTypesToULTab(ULId){
    $.ajax({
        url: 'controller/get_all_question_types.php',
        type: 'POST',
        dataType: 'json',
        success: function (questionTypeData) {
            console.log(questionTypeData);
            var len = questionTypeData.length;
            clearListItemsOf(ULId);
            for (var i = 0; i < len; i++) {
                var questionTypeId = questionTypeData[i]['questionTypeId'];
                var questionType = questionTypeData[i]['questionType'];
                var listItem = $('<li></li>').val(questionTypeId)
                                .text(questionType).addClass('tab-link').attr('data-tab',questionType);
                $(ULId).append(listItem);
                //$(ULId).append("<li class='tab-link'+' current' value='" + questionTypeId + "' >"    + questionType +    "</li>" );
            }
        },
        error: function (x, e) {
            handleError(x, e);
        }
    });
}

When I used Google Chrome's inspector to see if JQuery method translates exactly of how the original html above was written, it's almost correct except that it's not setting Multiple Choice as current <li> or tab.

Output in Google Chrome's inspector when <li> 's were inspected:

<li value="1" class="tab-link" data-tab="Multiple Choice">Multiple Choice</li>
<li value="2" class="tab-link" data-tab="Fill in the Box">Fill in the Box</li>
<li value="3" class="tab-link" data-tab="True or False">True or False</li>

What do I need to add to my JQuery code to produce,

Multiple Choice

Notice that the class value is tab-link current

I tried .addClass('tab-link current'); but only takes tab-link and drops current in html.

As in,

<li value="1" class="tab-link" data-tab="Multiple Choice">Multiple Choice</li>

Without current as part of the name class.

Thank you.

Answer 1

Like you said, you do need to also specifically add the class 'current' which is not in your main code sample.

You said you tried addClass('tab-link current') but we can't see that in the context of your whole code. You have a commented out line, but it doesn't make sense by itself because it would apply to all of the items and seems to be from an earlier iteration of your code.

How is your code to know which item should get the current class, if any? Perhaps try something like this (setting the first item to current, in this case):

success: function (questionTypeData) {
        var len = questionTypeData.length;
        clearListItemsOf(ULId);
        for (var i = 0; i < len; i++) {
            var questionTypeId = questionTypeData[i]['questionTypeId'];
            var questionType = questionTypeData[i]['questionType'];
            var listItem = $('<li></li>').val(questionTypeId)
                            .text(questionType).addClass('tab-link').attr('data-tab',questionType);
            if ( i == 0 ){
                listItem.addClass( 'current' );
            }
            $(ULId).append(listItem);
        }
    },

Answer 2

Try .addClass('tab-link'); and then .addClass('current'); This should work. Or .addClass('tab-link').addClass('current');