jQueryを使用して代替要素からリンクをクリックします
-
11-12-2019 - |
質問
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();
});
});
解決
私はあなたが適切な準備完了イベント/ etcであなたのjQueryが正しいセットアップをすると仮定します。これが私がやるべき方法です。JSFIDDLEの例をシミュレートするためにハイパーリンクにクリックイベントを追加しました。
http://jsfiddle.net/lucuma/s9mds/
$('div.section-title').click(function(e) {
$(this).next('div').find('a:eq(0)').click();
});
. 他のヒント
このを使ってください
$(document).ready(function() {
$('div.section-title').click( function(){
$(this).closest($('div.index-article').find('a.fancybox').click();
});
});
.