haga clic en el enlace del elemento alternativo con jquery

StackOverflow https://stackoverflow.com//questions/12654335

Pregunta

Si bien hay muchos buenos recursos para atravesar el DOM con jQuery, no estoy teniendo suerte con mi ejemplo.

En mi sitio www.smithgrey.co.uk tengo una serie de galerías de miniaturas, todas las cuales tienen un div de "título de sección" delante de ellas.

Lo que quiero lograr es cuando haces clic en el div 'título de la sección' la primera <a href> Se hará clic en el enlace de la miniatura de la derecha.

Hay múltiples instancias de la class="section-title" – Desafortunadamente, no puedo agregar ningún ID o Clase, ya que se genera dinámicamente y se me ha pedido que lo mantenga como está si es posible.

El HTML se ve así:

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

Y aquí está mi jQuery hasta ahora, pero no produce el resultado que me imagino porque hará clic en el enlace sin importar si hago clic en el primero o en el segundo. <div class="section-title">.

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

Solución:

Con la ayuda de los otros comentaristas logré descubrir cómo hacerlo funcionar como esperaba:

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

Solución

Asumiré que ha configurado su jQuery correctamente con el evento listo apropiado, etc.Así es como lo haría.Tenga en cuenta que agregué un evento de clic al hipervínculo para simular el clic en el ejemplo de jsfiddle.

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

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

Otros consejos

Utilizar esta

 $(document).ready(function() {
   $('div.section-title').click( function(){
     $(this).closest($('div.index-article').find('a.fancybox').click();
   });
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top