CODEWITHSUNDEEP
javascriptjquery
jimjim
jimjim

Reputation: 2503

Applying selector on a javascript element (within an event)

Event target is either fileUpload1 or fileUpload2. How ever I am having a hard time going up 2 levels in it's ancestory tree, getting the that node N and then appying JQuery Selector on that node N.

So far I have tried followiing variations: 

e.currentTarget.parentElement.ParentElement.$('.progress .progress-bar').css('width', progress + '%');

and

$(event.target).parent().parent().$('.progress .progress-bar').css('width', progress + '%');

Here is the main code:

   <script type="text/javascript">
        $(document).ready(function () {
            $('.fileupload').fileupload({
                dataType: 'json',
                url: '/Home/UploadFiles',
                autoUpload: true,
                done: function (e, data) {
                    $(event.target).parent().parent().$('.file_name').html(data.result.name);
                    $(event.target).parent().parent().$('.file_type').html(data.result.type);
                    $(event.target).parent().parent().$('.file_size').html(data.result.size);
                }
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $(event.target).parent().parent().$('.progress .progress-bar').css('width', progress + '%');
            });
        });
    </script>

and the body:

<body>
    <div class="container">
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <input class="fileupload" type="file" name="filesUploader1" multiple>
        </span>
        <br />
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                <span class="sr-only">0% complete</span>
            </div>
        </div>
        <br />
        <div class="file_name"></div>
        <br />
        <div class="file_type"></div>
        <br />
        <div class="file_size"></div>
    </div>
    <div class="container">
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <input class="fileupload" type="file" name="filesUploader2" multiple>
        </span>
        <br />
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                <span class="sr-only">0% complete</span>
            </div>
        </div>
        <br />
        <div class="file_name"></div>
        <br />
        <div class="file_type"></div>
        <br />
        <div class="file_size"></div>
    </div>
</body>

Here is the original question that I started with, now all I need is to restrict the event executing on all the elements, or selecting the elements that it should effect.

In debugger I see the values for e and e.ParnetElement etc, but some how cant make the whole thing work.

Upvotes: 0

Views: 54

Answers (2)

Dave Salomon
Dave Salomon

Reputation: 3297

Rather than chaining parent() together, you can use parents().

$(event.target).parents('.progress .progress-bar').css({ ... });

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can use .closest() to find the container element containing the target element and then use .find() to get the progress-bar elemnet

$(e.currentTarget).closest('.container').find('.progress .progress-bar').css('width', progress + '%');

Upvotes: 3

Related Questions