Question

事件目标是fileUpload1或fileUpload2。我怎么会很难在它的祖先树中上升2级，获得该节点N然后在该节点N上应用JQuery Selector。

到目前为止，我尝试了以下变体：

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

和

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

这是主要代码：

   <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>

和身体：

<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>

这是我开始的原始问题，现在我需要的是限制在所有元素上执行的事件，或选择它应该影响的元素。

在调试器中，我看到e和e.ParnetElement等的值，但是有些不能使整个过程发挥作用。

Answer 1

您可以使用.closest()查找包含目标元素的container元素，然后使用.find()获取progress-bar elemnet

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

Answer 2

您可以使用parents()。

，而不是将parent()链接在一起

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

在javascript元素上应用选择器（在事件中）

2 个答案: