2012-10-11 6 views
2

이벤트 트리거 요소에 가까이 HTML 요소의 값을 얻는 방법 :다음과 같이 내가 HTML 코드를 사용하고

 <label style="display:inline;">Information</label> 
    <a id="eventtrigger" >Click</a> 

및 JQuery와 다음과 같이

$("#eventtrigger").click(function(event){ 
     //event handling process 
     }); 

내가 원하는을 요소 근처의 레이블 값을 가져 오려면 이벤트를 트리거합니다.
즉, ID 또는 클래스 "과 같은 특정 선택기를 사용하지 않고"Infomation "jquery 이벤트 처리 과정 내에서""값을 얻어야 함을 의미합니다.

답변

5

prev을 사용하면 이전 요소를 가져올 수 있습니다.

Live Demo

$("#eventtrigger").click(function(event){ 
    alert($(this).prev().text()); 
    }); 

또는

$("#eventtrigger").click(function(event){ 
    alert($(this).prev('label').text()); 
}); 
+0

을 사용할 수 있습니다 ('라벨') ' –

+0

@Vega 링크와 라벨 사이에 무엇이있을 경우 어떻게해야합니까? 이 예제에는 없지만 실제 세계에있을 수 있습니다. – Archer

+0

@Archer 그럼 레이아웃이 그런 경우 추가 체크가 필요하지 않습니까? –

2

사용 .prev()

$("#eventtrigger").click(function(event){ 
    $(this).prev('label').text(); 
}); 

당신은 또한을 사용할 수 있습니다에게 이전 레이블을 위해 특별히 찾고 당신의 HTML이 항상 같을 경우 0 방법은

$("#eventtrigger").click(function(event){ 
    alert($(this).siblings('label').text()); 
    });​ 

Check FIDDLE

1

, 다음 @ 아딜의 방법과 함께 할 것입니다. 그러나 더욱 역동적 인 것이 필요하다면 .siblings()을 사용하고 간단히 .first()을 잡고 "가장 가까운"것입니다. 그것의 각 측면에 라벨이있는 경우 즉 경우에, 나는이 후 첫 번째 를 잡아 것이라고 생각 , 그러나

// The following will grab the closest label to any a tag clicked on 
$("a").on("click", function(e) { 
    var closest = $(this).siblings("label").first(); 
    console.log(closest); 
}): 

:

예를 들어 당신은 같은 것을 고려할 수 바람직하지 않으며 첫 번째 태그를 원한다면 (예 : 태그 앞에 여러 개의 레이블과 p 태그가있을 수 있습니다) .prev()은 태그 앞에 FIRST 요소 만 가져 오기 때문에 .prev() 이상의 값이 필요합니다. 이 경우 .first()과 결합 된 .prevAll()을 사용하여 a 태그 앞에 언급 된 첫 번째 레이블을 가져옵니다. 이와 같이

:

$("a").on("click", function(e) { 
    var closest = $(this).prevAll("label").first(); 
    console.log(closest); 
}): 

그리고 반대의 경우에 대한 물론

당신은 단순히 대신 .prev`의 .prev``사용합니다 .nextAll()

$("a").on("click", function(e) { 
    var closest = $(this).nextAll("label").first(); 
    console.log(closest); 
}): 
관련 문제