cliquez sur le lien de l'élément alternatif avec jquery

Bien qu'il y ait beaucoup de bonnes ressources pour traverser le DOM avec jQuery, je n'ai pas de chance sur mon exemple.cliquez sur le lien de l'élément alternatif avec jquery

Sur mon site www.smithgrey.co.uk J'ai une série de galeries de vignettes qui ont un div de «section section» devant eux. Ce que je veux réaliser, c'est quand vous cliquez sur le div de 'section-title', le premier lien <a href> de la vignette vers la droite sera cliqué.

Il existe plusieurs instances de class="section-title" - Malheureusement, je ne peux pas ajouter d'ID ou de classes car cela est généré dynamiquement et on m'a demandé de le conserver tel quel si possible.

Le code HTML ressemble à ceci:

<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>

Et voici mon jQuery jusqu'à présent, mais il ne donne pas le résultat que j'imagine, car il cliquez sur le lien, peu importe si je clique sur le premier ou le deuxième <div class="section-title"> .

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

Solution:

Avec l'aide des autres commentors j'ai réussi à comprendre comment le faire fonctionner comme je m'y attendais:

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

Source

2012-09-29 Sofus Graae

je vais supposer que vous avez configuré votre jQuery correct avec l'événement ready approprié/etc. C'est comme ça que je le ferais. Veuillez noter que j'ai ajouté un événement click au lien hypertexte pour simuler le clic dans l'exemple jsfiddle.

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

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

Source

2012-09-29 16:37:15 lucuma

Hey je vous ai donné la suggestion d'un coup, mais pas de chance, mais je commençais à jouer avec .next() et je l'ai eu à travailler - alors merci vous pour l'aide. –

Utilisez cette

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

Source

2012-09-29 16:50:27 StaticVariable

hé je vous remercie pour la contribution mais il ne me donne aucun résultat et après avoir regardé le placard() sur les docs de jQuery je peux voir qu'il voyage seulement dans le DOM et je suppose que je devrais descendre - pas sûr si cela fait toute différence. –

@SofusGraae Mais dans votre code Vous allez vers le haut – StaticVariable

Hey @jhonarymos désolé si je l'ai fait paraître/sonner de cette façon. L'idée est que lorsque vous cliquez sur la première instance de la div avec class = "section-title" alors il va ouvrir le lien qui contient . si vous appuyez sur la seconde instance de class = "section-title-type", vous allez ouvrir le lien qui est enroulé autour de - est-ce que cela a du sens (attention, ce n'est pas mon travail de jour pour expliquer ce que je à peine pouvez envelopper ma tête est difficile mais vous aide est très apprécié :) –

cliquez sur le lien de l'élément alternatif avec jquery

Répondre

Questions connexes