获取父类并在jquery中触发

Question

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

<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类，当我点击imageclick类时，我想触发相应列表的photopicker 。 当我使用时，它的工作效果很好

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

请帮助我们！

Answer 1

他们不是彼此的祖先/后代。

您需要使用closest的LI（最近的共同祖先），然后使用find向下搜索：

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

你也可以将trigger('click')缩短为.click()因为它在幕后完全相同：

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

您可以使用兄弟选择器，但这对于在DOM中进行的更改不那么健壮。 更安全地使用共同的祖先并找到。 例如，如果为了样式目的而更改布局并且在元素周围添加了额外的DIV，则兄弟搜索将失败。

Answer 2

最近的向上看祖先。 你想要横向走向兄弟姐妹。

可以使用prev()或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以查找其父项，然后搜索所需的子项

<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的使用，它的工作是通过它的父元素，而不是SIBLINGS，在你的标记中， PhotoPicker类是一个兄弟元素，而不是父/祖先元素。

但是addImage是父/祖先元素imageclick 。 所以你可以使用closest方式访问它;

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

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

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