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ですが、最初または2番目をクリックしてもリンクをクリックするため、私が想像するような結果は得られません<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();
});
});