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

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

javascript jquery

在javascript元素上应用选择器（在事件中）,javascript,jquery,Javascript,Jquery,事件目标为fileUpload1或fileUpload2。然而，我一直很难在它的ancestory树中提升两个级别，获取该节点N，然后在该节点N上应用JQuery选择器到目前为止，我尝试了以下变化： e.currentTarget.parentElement.ParentElement.$('.progress .progress-bar').css('width', progress + '%'); 及以下是主要代码： <script type="text/javascrip

事件目标为fileUpload1或fileUpload2。然而，我一直很难在它的ancestory树中提升两个级别，获取该节点N，然后在该节点N上应用JQuery选择器

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

e.currentTarget.parentElement.ParentElement.$('.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>


$（文档）.ready（函数（）{
$（'.fileupload'）.fileupload({
数据类型：“json”，
url:“/Home/UploadFiles”，
自动上传：对，
完成：功能（e，数据）{
$（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'，函数（e，数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（event.target.parent（）.parent（）.$（'.progress.progress bar'）.css（'width'，progress+'%'）；
});
});

和机构：

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


添加文件。。。


完成0%






添加文件。。。


完成0%

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

在debugger中，我看到了e和e.ParnetElement等的值，但有些值无法使整个过程正常工作。

您可以使用查找包含目标元素的

容器元素，然后使用获取进度条
元素
$(e.currentTarget).closest('.container').find('.progress .progress-bar').css('width', progress + '%');

您可以使用查找包含目标元素的容器
元素，然后使用获取进度条
元素
$(e.currentTarget).closest('.container').find('.progress .progress-bar').css('width', progress + '%');

您可以使用
$（event.target）.parents（'.progress.progress bar'）.css（{…}）
您可以使用
$（event.target）.parents（'.progress.progress bar'）.css（{…}）
使该部分起作用的是，我在完成时尝试了与其他部分相同的方法，但它不起作用：done:function（e，data）{$（e.currentTarget）.closest（'.container'）.find（'.file_name'）.html（data.result.name）；$（e.currentTarget）.closest（'.container'）.find（'.file_-type'）.html（data.result.type）$（e.currentTarget）.closest（'.container'）.find（'.file_size'）.html（data.result.size）；}进度条正在进行，但是“完成：函数（e，数据）{$（e.currentTarget）.closest（'.container'）.find（'.file_name'）.html（data.result.name）；$（e.currentTarget）.closest”部分（'.container'）.find（'.file_-type'）.html（data.result.type）；$（e.currentTarget）.最近的（'.container'）.find（'.file_-size'）.html（data.result.size）；}”不起作用抱歉，我认为这可能也起作用，我需要查看调试器中的变量。这可能是另一个问题，java脚本不会引发异常，我可能需要在事件发生后查看呈现的html。使用$（e.currentTarget）.closest（'.container'）.find（'.file_name'）.html（data.result.nam‌e） ；无效！但只要我将其更改为$（'.file_name'）.html（data.result.nam‌e） ；所有具有file_name类的元素都会更改，唯一的问题是如何仅在与$（e.currentTarget）更改相同的容器中进行更改。我是否可以尝试与Javascript parentElement类似的更改？语法是什么？当我将其更改为$（e.target）.closest（'.container'）.find（'.file_name'）.html（data.result.name）时成功了！为什么有些是e.target，有些是e.currentTarget？这使得该部分可以工作，我在完成时对其他部分也做了同样的尝试，但没有工作：done:function（e，data）{$（e.currentTarget）.closest（'.container'）.find（'.file_name'）.html（data.result.name）；$（e.currentTarget）.closest（'.container'）.find（'.file_-type'）.html（data.result.type）；$（e.currentTarget）.最近的（'.container'）.find（'.file_-size'）.html（data.result.size）；}进度条正在进行中，但“完成：函数（e，数据）{$（e.currentTarget）.最近的（'.container'）.find（'.file_-name'）.html”部分正在进行（data.result.name）；$（e.currentTarget）.最近的（'.container'）.find（'.file_-type'）.html（data.result.type）；$（e.currentTarget）.最近的（'.container'）.find（'.file_-size'）.html（data.result.size）；}”不起作用抱歉，我认为这可能也起作用，我需要查看调试器中的变量。这可能是另一个问题，java脚本不会引发异常，我可能需要在事件发生后查看呈现的html。使用$（e.currentTarget）.closest（'.container'）.find（'.file_name'）.html（data.result.nam‌e） ；无效！但只要我将其更改为$（'.file_name'）.html（data.result.nam‌e） ；所有具有file_name类的元素都会更改，唯一的问题是如何仅在与$（e.currentTarget）更改相同的容器中进行更改。我是否可以尝试与Javascript parentElement类似的更改？语法是什么？当我将其更改为$（e.target）.closest（'.container'）.find（'.file_name'）.html（data.result.name）时成功了！为什么有些是e.target，有些是e.currentTarget？