使用类 jquery 从类似选择器列表中配对元素触发器答案

【问题标题】：Pair element-trigger from a list of similar selectors using classes jquery使用类 jquery 从类似选择器列表中配对元素触发器
【发布时间】：2017-05-19 20:01:35
【问题描述】：

我有一个类似这样的html代码：

<div class="col-md-7">   
  <div class="row launch">
       <img class="img-responsive" alt=""><br/>
  </div>
  <ul class="row gallery">
    <a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
                        <img src=""/>
    </a>
  </ul>
 </div>
 <div class="col-md-7"> 
  <div class="row launch">
        <img class="img-responsive" alt=""><br/>
  </div>
  <ul class="row gallery">
    <a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
            <img src=""/>
   </a>
  </ul>
</div>

我正在尝试做的（使用 JQuery）是当用户单击 第一个 div“行启动”以使用下一个兄弟姐妹 ul 中的链接“light-link”做某事时“行画廊”。我想要与第二个 div“行启动”相同的东西，以及波纹管兄弟内部的链接等等......我做错了什么？我的代码如下所示：

$('.launch').click(function(){
    $('.launch').next().children("a:first").trigger('click');
 });

但它不起作用，它总是将事件附加到列表中的第一个 ul 一个“light-link”，即使我点击列表中的第二个 div“行启动” ，或者第三个... 注意：需要一个 lightgallery 示例（使用类的多个画廊），我想在用户点击默认大图像时触发缩略图上的 clic，并激活相关画廊。

【问题讨论】：

标签： javascript jquery jquery-selectors siblings lightgallery

【解决方案1】：

您可以使用siblings 和children。请注意，要触发原生点击，您应该使用get，然后使用click 函数来触发它。

$('.launch').click(function(){
    $(this).siblings('ul').children(".light-link").get(0).click();
 });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7">   
  <div class="row launch">
       <img class="img-responsive" alt="pic1"><br/>
  </div>
  <ul class="row gallery">
    <a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
                        <img src="google.com" alt="pic link1"/>
    </a>
  </ul>
 </div>
 <div class="col-md-7"> 
  <div class="row launch">
        <img class="img-responsive" alt="pic2"><br/>
  </div>
  <ul class="row gallery">
    <a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
            <img src="" alt="pic link2"/>
   </a>
  </ul>
</div>

【讨论】：

【解决方案2】：

尝试结合选择器this 的.find() 函数：

$('.launch').click(function(){
  $(this).next().find("a:first-of-type").trigger('click');
});

【讨论】：

【解决方案3】：

谢谢。这两个答案都有效，所以我的问题与lightgallery有关 http://sachinchoolur.github.io/lightGallery/demos/

我有所有这些缩略图，当点击其中一些时，您会激活灯光图库。但是，我还需要，当用户点击更大的默认图像（不是缩略图）时，它将通过触发第一个拇指上的点击来激活相关画廊lightgallery with big picture activating the gallery

【讨论】：