Question

虽然使用jQuery遍历DOM有很多很好的资源，但我的例子并没有运气。

在我的网站www.smithgrey.co.uk上我有一系列的缩略图画廊，所有这些画廊都有一个“部分标题”div。

我想要实现的是当您点击“section-title”div时，点击右侧缩略图的第一个<a href>链接会被点击。

class="section-title"有多个实例 - 不幸的是我无法添加任何ID或类，因为这是动态生成的，并且如果可能的话，已被要求保持原样。

HTML看起来像这样：

<body>
  <div id="content-grid">
    <div class="section-title">
      <span class="section-title-type">Title of the first thumbnail gallery</span>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-1">
      </a>
    </div>

    <div class="section-title">
      <span class="section-title-type">Title of the second thumbnail gallery</span>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-2">
      </a>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-3">
      </a>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-4">
      </a>
    </div>   
  </div>
</body>

到目前为止，这是我的jQuery，但它没有产生我想象的结果，因为无论我点击第一个还是第二个<div class="section-title">，它都会点击链接。

$('div.section-title').click( function(){
       $(this).parent().next($('div.index-article')).children('a.fancybox').click();
     });

解决方案：

在其他评论员的帮助下，我设法弄清楚如何使其按预期工作：

$(document).ready(function() {
  $('div.section-title').click( function(){
    $(this).next('.index-article').find('a.fancybox:first').click();
  });
});

Answer 1

我假设您已经使用适当的ready事件/等设置了jQuery。我就是这样做的。请注意我已经在超链接中添加了一个点击事件来模拟jsfiddle示例中的点击。

http://jsfiddle.net/lucuma/s9mds/

$('div.section-title').click(function(e) {
    $(this).next('div').find('a:eq(0)').click(); 
});

Answer 2

使用此

 $(document).ready(function() {
   $('div.section-title').click( function(){
     $(this).closest($('div.index-article').find('a.fancybox').click();
   });
});

使用jquery单击来自alternative元素的链接

2 个答案: