如何使用jQuery触发父元素？附相关HTML代码及页面URL

我有如下HTML代码：

<div class="gallery_images" id="10"> 
  <a href="" data-toggle="modal" data-target="#myModal9" tabindex="0"> 
    <img class="img-fluid" src="http://contest.geojidesign.com/wp-content/uploads/contest_entries/thumbnail-1680__1050__auto___wp-content_uploads_2015_01_ajax-forms.jpg"> 
  </a> 
</div>

页面URL为：http://v9contest.geojidesign.com/?img=http://v9contest.geojidesign.com/wp-content/uploads/contest_entries/1680__1050__auto___wp-content_uploads_2...
请问如何使用jQuery触发该父元素？

没问题，我来帮你搞定这个需求。首先得明确：你说的“触发父元素”，大概率是要触发它内部<a>标签的点击事件（毕竟这个a标签绑定了模态框的唤起逻辑），下面分几种场景给你具体方案：

场景1：直接触发父元素内的a标签点击（最常用） #

如果你的目标是唤起对应的模态框，直接触发a标签的点击就好，通过父元素定位更精准：

// 方法1：通过父元素ID定位子a标签
$('#10 a').trigger('click');

// 方法2：结合类名+ID双重定位，避免ID冲突
$('.gallery_images#10 a').trigger('click');

场景2：给父元素本身绑定事件并触发 #

如果是要给父div（.gallery_images#10）绑定自定义事件或者原生事件，再手动触发它，可以这么写：

// 先给父元素绑定点击事件（这里也可以换成你需要的其他事件）
$('#10').on('click', function() {
  // 这里可以写父元素被触发后的逻辑，比如顺带唤起模态框
  $(this).find('a').trigger('click');
});

// 手动触发父元素的点击事件
$('#10').trigger('click');

场景3：根据URL参数自动触发 #

你的页面URL带了img参数，如果你想打开页面就自动匹配对应的元素触发，可以先解析URL参数，再定位到目标元素：

// 解析URL中的img参数
const imgParam = new URLSearchParams(window.location.search).get('img');
// 取图片文件名（避免路径差异导致匹配失败）
const imgFilename = imgParam.split('/').pop();

// 找到对应img元素，向上定位到父div，再触发a标签点击
$('img[src*="' + imgFilename + '"]').closest('.gallery_images').find('a').trigger('click');

内容的提问来源于stack exchange，提问作者Rizwi