jQuery 获取父元素属性时 undefined 的问题解决-js教程-PHP中文网

jQuery 获取父元素属性时 undefined 的问题解决

聖光之護

发布： 2025-10-02 12:37:01

原创

575人浏览过

jquery 获取父元素属性时 undefined 的问题解决

本文针对在使用 jQuery 获取父元素属性时遇到 undefined 的问题，提供了一个清晰的解决方案。通过分析常见错误原因，结合代码示例，详细解释了如何正确地使用 closest() 和 find() 方法来获取目标元素的属性值，避免 undefined 错误的发生。

在使用 jQuery 进行 DOM 操作时，经常需要获取特定元素的属性值。当尝试获取父元素的属性，尤其是通过 closest() 和 find() 方法时，可能会遇到 undefined 的情况。这通常是由于选择器使用不当造成的。

问题分析

问题在于，jQuery 的选择器需要明确指定元素类型，例如类名、ID 或标签名。在原始代码中，closest('field') 和 find('field_info') 缺少了类名选择器所必需的 . 前缀。

解决方案

正确的做法是在选择器中添加 . 前缀，明确指定要查找的是类名为 field 和 field_info 的元素。修改后的代码如下：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

(function($){
    $.dispatcherFiles = {
        $filesDropzone: null,
        $parallelUploads: 100,
        $maxFiles: 10,
        $files: [],

        cacheDom: function(){
            this.$body = $('body');
        },

        functions: {
            uploadFiles: function (e) {
                // Corrected lines: Added '.' prefix to class selectors
                let field = $(e.currentTarget).closest('.field').find('.field_info');
                let photoID = $(e.currentTarget).closest('.field').find('.field_info').attr('data-field_photo_id');
                console.log(field);
                console.log(photoID);
            },
        },

        events: function(){
            this.$body.on('click', '.field .field_form .btnUpload', this.functions.uploadFiles.bind(this));
        },

        init: function () {
            this.cacheDom();
            this.events();
        }
    };

    $.dispatcherFiles.init();

})(jQuery);

登录后复制

代码解释：

$(e.currentTarget)：获取触发 click 事件的元素，即点击的上传按钮。
.closest('.field')：从当前元素开始，向上查找最近的 class 为 field 的父元素。
.find('.field_info')：在找到的 field 元素内部，查找 class 为 field_info 的子元素。
.attr('data-field_photo_id')：获取 field_info 元素的 data-field_photo_id 属性值。

完整示例

以下是一个完整的 HTML 示例，展示了如何使用修改后的 jQuery 代码来正确获取 data-field_photo_id 属性：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Get Parent Attribute Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"  rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
    <style>
        .field {
            margin: 50px;
        }
    </style>
</head>
<body>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="5">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" href="#">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div id="dz_params_field_photo_5" data-type="pipeline" data-entity_id="11" style="display: none"></div>
        <div id="dz_field_photo_5_uploaded"></div>
    </div>
</div>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="6">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" href="#">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div id="dz_params_field_photo_6" data-type="pipeline" data-entity_id="12" style="display: none"></div>
        <div id="dz_field_photo_6_uploaded"></div>
    </div>
</div>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="7">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" href="#">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div id="dz_params_field_photo_7" data-type="pipeline" data-entity_id="13" style="display: none"></div>
        <div id="dz_field_photo_7_uploaded"></div>
    </div>
</div>

<script>
    (function($){
        $.dispatcherFiles = {
            $filesDropzone: null,
            $parallelUploads: 100,
            $maxFiles: 10,
            $files: [],

            cacheDom: function(){
                this.$body = $('body');
            },

            functions: {
                uploadFiles: function (e) {
                    let field = $(e.currentTarget).closest('.field').find('.field_info');
                    let photoID = $(e.currentTarget).closest('.field').find('.field_info').attr('data-field_photo_id');
                    console.log(field);
                    console.log(photoID);
                },
            },

            events: function(){
                this.$body.on('click', '.field .field_form .btnUpload', this.functions.uploadFiles.bind(this));
            },

            init: function () {
                this.cacheDom();
                this.events();
            }
        };

        $.dispatcherFiles.init();

    })(jQuery);
</script>

</body>
</html>

登录后复制