Question

I have several divs that are generated dynamically after a file is uploaded. Each file upload creates a div in this format:

<div id="uploadifive-fileupload-queue" class="uploadifive-queue">
    <div class="uploadifive-queue-item complete" id="uploadifive-fileupload-file-0">

        <div id="inputs">

            some text

        </div>
    </div>
</div>

Every item uploaded increments the id of the uploadifive-queue-item class to uploadifive-fileupload-file-0, uploadifive-fileupload-file-1, uploadifive-fileupload-file-2, etc.

What I am trying to do is add a class to #inputs, but only the one just created.

I’ve tried the following, but it applies the class to the wrong div (usually the first div)

  $('#fileupload').uploadifive({
                'buttonClass'  : 'btn btn-primary',
                'buttonText'   : 'Select Thumbnail',
                'dnd' : false,
                'fileSizeLimit' : 1000,
                'method' : 'post',
                'simUploadLimit' : 1,
                'uploadScript' : './upload/',
                'onUploadComplete'  : function(file, data) {
                    $('#inputs:last').addClass('alert-error');
                }

            });

#fileupload is just the name of the form, here’s the HTML:

<form id="fileupload">
    <input type="file" name="userfile" size="20" />
</form>

The divs are added directly underneath and are inside the same container.

How can I select the correct div?

Answer 1

Try this:

$("#uploadifive-fileupload-queue .uploadifive-queue-item:last") should give you the last div added

so your onLoadComplete handler would be:

'onUploadComplete'  : function(file, data) {
                    $("#uploadifive-fileupload-queue .uploadifive-queue-item:last").find('.inputs').addClass('alert-error');
                }