在jquery中获取父类和触发器答案

【问题标题】：Get parent class and trigger in jquery在jquery中获取父类和触发器
【发布时间】：2016-05-18 07:29:45
【问题描述】：

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

<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');

请帮帮我！

【问题讨论】：

方法closest()搜索元素的所有匹配的父元素，而不是兄弟元素

标签： javascript jquery css image jquery-selectors

【解决方案1】：

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

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

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

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

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

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

【讨论】：

同级选择器对 DOM 的变化不那么健壮是什么意思？
如果 DOM 发生变化（用于格式化等的额外包装 div）兄弟代码将失败。
也就是说，如果OP使用angularjs，他不应该首先使用jQuery
@GoneCodingGoodbye 抱歉我的语法不好。我的意思是 OP 似乎使用了 angularjs，onchange="angular.element(this).scope().file_changed(this)"，所以我猜他不应该尝试使用任何 jQuery 方法来触发事件。但我不是角度开发者，所以我只是猜测......
@A.Wolff：明白了。直到我把它滚动到右边才看到。是的，将 Angular 事件与 jQuery 结合可能会出现问题，但我也不使用 Angular。

【解决方案2】：

最近的人向上看祖先。你想侧身去找兄弟姐妹。

可以使用prev()或siblings()

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

或者

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

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

但addImage 是imageclick 的父/祖先元素。所以你可以像这样使用closest 访问它；

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

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

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

【讨论】：