0

虽然有很多关于使用 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();
  });
});
4

2 回答 2

0

我将假设您已使用适当的就绪事件/等正确设置了您的 jQuery。我就是这样做的。请注意，我在超链接中添加了一个单击事件，以模拟 jsfiddle 示例中的单击。

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

$('div.section-title').click(function(e) {
    $(this).next('div').find('a:eq(0)').click(); 
});​
于 2012-09-29T16:37:15.193 回答
0

用这个

 $(document).ready(function() {
   $('div.section-title').click( function(){
     $(this).closest($('div.index-article').find('a.fancybox').click();
   });
});
于 2012-09-29T16:50:27.557 回答