Question

我有以下HTML：

<div class="uploadimage" >
    <img src="test.png"  />
    <div class="form-inline" >
        <button type="button" class="fileupload"> <i class="fa fa-folder-open"></i>
            <input type="file" class="upload">
        </button>
        <button type="button" class="btnupload"> <i class="fa fa-cloud-upload"></i> </button>
    </div>
</div>

在jQuery中我有以下代码：

 $(".fileupload input").change(function () {
            var input = this;

            // this works but I think there is a better way
            var image = $(this).closest('.form-inline').siblings('img');


        });

我已经获得了图像元素，但我确定其表现并不好。

有没有更好的方法？

Answer 1

有多种方法可以做到这一点，

其中一种方法是在您的案例中找到包含相关div

的容器img

$(".fileupload input").change(function () {
       // this works but I think there is a better way
       var image = $(this).closest('.uploadimage').find('img');
});

如果你担心哪种方式会更好，

.siblings()：如果您在此处参考文档https://api.jquery.com/siblings/，此方法会匹配all指定的选择器并创建新元素。只有当你要manipulate一个元素时才应该使用此方法，例如更改css和属性。在内部，当然可能会触发find来匹配/获取元素。
.closest()：与.sibilings()相比，此https://api.jquery.com/closest/会更好。它不会创建新元素，也只会找到您尝试在DOM中搜索的必需元素。

jQuery如何查找图像上部元素

1 个答案: