CODEWITHSUNDEEP
jqueryhtml-lists
Michael
Michael

Reputation: 2284

How to change list item class using jQuery?

My application requires that users upload a set of required documents (Upload #1, Upload #2, Upload #3). When an upload completes, it returns the requirement identifier (req_id).

The page displays a list of the requirements, and I'd like to use jQuery to change the class of the list item from "missing" to "complete" once and upload has completed.

HTML:

<ul>
    <li class="missing" rel="1">
        <a href="#" target="_blank">Upload #1</a>
    </li>
    <li class="missing" rel="2">
        <a href="#" target="_blank">Upload #2</a>
    </li>
    <li class="missing" rel="3">
        <a href="#" target="_blank">Upload #3</a>
    </li>
</ul>

Javascript:

function stopUpload(success, req_id){

    if (success == 1){
        $('#upload_result').html('<span class="msg">Success!<\/span>');
        $(req_id).attr('rel').removeClass().addClass('complete')  
    }
    else {
        $('#upload_result', window.parent.document).html(
        '<span class="emsg">Error!<\/span>');
    }
    $('#upload_progress').hide();
    return true;

}

Upvotes: 0

Views: 953

Answers (1)

Richard
Richard

Reputation: 4415

function stopUpload(success, req_id){

    if (success == 1){
        $('#upload_result').html('<span class="msg">Success!<\/span>');
        $("ul li[rel=" + req_id + "]").removeClass().addClass('complete')  
    }
    else {
        $('#upload_result', window.parent.document).html(
        '<span class="emsg">Error!<\/span>');
    }
    $('#upload_progress').hide();
}

Upvotes: 1

Related Questions