щелкните ссылку из альтернативного элемента с помощью jquery
-
11-12-2019 - |
Вопрос
Несмотря на то, что существует много хороших ресурсов по обходу DOM с помощью jQuery, мне не повезло с моим примером.
На моем сайте www.smithgrey.co.uk у меня есть серия галерей миниатюр, перед каждой из которых есть раздел «заголовок раздела».
Чего я хочу добиться, так это когда вы первым нажимаете на div 'section-title' <a href>
ссылка на миниатюру справа будет нажата.
Существует несколько экземпляров class="section-title"
– К сожалению, я не могу добавить какие-либо идентификаторы или классы, поскольку они генерируются динамически, и меня попросили сохранить их такими, какие они есть, если это возможно.
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();
});
});
Решение
Я предполагаю, что вы правильно настроили 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();
});
});