2012-09-29 2 views
0

jQuery를 사용하여 DOM을 트래버스하는 데 유용한 리소스가 많이 있지만, 필자의 예에는 운이 좋지 않습니다.jquery로 대체 요소 링크를 클릭하십시오.

내 사이트에 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를하지만, 내가 첫 번째 또는 <div class="section-title">초를 클릭하면이 링크에 상관없이 클릭하기 때문에 그것은 내가 상상 결과를 얻을하지 않습니다 .

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

솔루션 : 내가 관리하는 다른 commentors의 도움으로

내가 예상대로 작동하게하는 방법을 알아낼 수 :

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

답변

0

난 당신이 설정하여이 있다고 가정합니다 적절한 준비 이벤트/etc로 jQuery가 올바른지 확인하십시오. 이것이 내가하는 방법이다. jsfiddle 예제에서 클릭을 시뮬레이션하기 위해 하이퍼 링크에 클릭 이벤트를 추가했습니다.

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

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

이봐, 난 당신의 제안에게 이동하지만 행운을했다하지만 난 다음 내용 (바이올린하기 시작했다) 나는 일이있어 - 너무 감사합니다 도움을 청합니다. –

0

사용이

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

안녕하세요, 입력 해 주셔서 감사합니다하지만 어떤 결과를 포기하지 않고 jQuery의 워드 프로세서에서 옷장()을 보았는데 DOM에서만 위로 이동한다는 것을 알 수 있습니다. 어떤 차이. –

+0

@SofusGraae 그러나 당신의 코드에서 당신은 위로 가고 있습니다 – StaticVariable

+0

안녕하세요 @ jhonarymos 내가보기/소리 그런 식으로 만들면 미안 해요. 아이디어는 class = "section-title"으로 div의 첫 번째 인스턴스를 클릭하면 을 포함하는 링크가 열립니다. 다른 한편으로는 class = "section-title-type"의 두 번째 인스턴스를 누른 다음 을 감싸는 링크를 엽니 다. -이 말이 내 일이 아니기 때문에 마음에 들지 않습니다. 간신히 내 머리를 감쌀 수 있지만 까다 롭지 만 도와 주시면 감사하겠습니다. –

관련 문제