获取父项 class 并在 jquery 中触发

Question

我想通过单击按钮或图像来触发父 class 的事件。

<li class="addImage">
<input class="PhotoPicker" type="file" accept="image/*" capture="camera" onchange="angular.element(this).scope().file_changed(this)" />
<a class='imageclick' onclick=" $(this).closest('.PhotoPicker').trigger('click');">
    <img ng-src="images/add-photo.png">
</a>

此处 addImage class 重复，当我单击 imageclick class 时，我想触发相应列表的 photopicker。我用的时候效果很好，

('.PhotoPicker').trigger('click');

请大家帮帮我！

Answer 1

他们不是 ancestors/descendants 彼此。

您需要使用 closest 向上查找 LI（最近的共同祖先），然后使用 find:

向下搜索

$(this).closest('li').find('.PhotoPicker').trigger('click');

您也可以将 trigger('click') 缩短为 .click()，因为它在幕后做的事情完全相同：

$(this).closest('li').find('.PhotoPicker').click();

您可以使用同级选择器，但这对于 DOM 中所做的更改来说不够稳健。使用共同的祖先并查找更安全。例如，如果出于样式目的更改布局并在元素周围添加额外的 DIV，则兄弟搜索将失败。

Answer 2

近距离仰望祖先。你想侧身去兄弟姐妹

可以使用prev() or siblings()

$(this).prev().trigger('click');

或

$(this).siblings('.PhotoPicker').trigger('click');

Answer 3

$(".imageclick").prev().trigger("click");

您可以在这里简单地使用 prev 选择器.. https://api.jquery.com/prev/

Answer 4

您可以向上移动 DOM 找到它的 parents 然后搜索所需的 child

<li class="addImage">
    <input class="PhotoPicker" type="file" accept="image/*" capture="camera" onchange="angular.element(this).scope().file_changed(this)" />
    <a class='imageclick' onclick="someFunction()">
        <img ng-src="images/add-photo.png">
    </a>

JS

 function(){
         $(this).parent().find('.PhotoPicker').trigger('click');
}

jsfiddle

Answer 5

您应该了解 closest 的用法，它的作用是向上遍历其父元素，而不是兄弟元素，在您的标记中 class PhotoPicker 是兄弟元素，不是 parent/ancestor 元素。

但是 addImage 是 imageclick 的 parent/ancestor 元素。因此，您可以像这样使用 closest 访问它；

$(this).closest('.addImage')

然后您可以使用 find 函数获取其中的 PhotoPicker 元素，例如：

$(this).closest('.addImage').find('.PhotoPicker').first().trigger('click')

获取父项 class 并在 jquery 中触发

Get parent class and trigger in jquery

javascript

css

jquery

image

jquery-selectors