가장 가까운 선택기 jQuery

Question

jquery와 가장 가까운 값을 선택하려고하지만 초보자이고 시도가 성공적이지 않습니다.

누구든지 내가 뭘 잘못하고 있다고 말할 수 있습니까? 어떤 도움을 주셔서 감사합니다!

<div class="two columns">        
<form class="float-right"> 
    <input type="hidden" id="show_id" value="329"> 
    <input type="hidden" id="user_id" value="172"> 
    <div id="follow-button" class="button small follow-call follow-show float-right">Follow</div> 
    </form> 
</div> 
<div class="two columns">       
<form class="float-right"> 
    <input type="hidden" id="show_id" value="389"> 
    <input type="hidden" id="user_id" value="172"> 
    <div id="follow-button" class="button small follow-call follow-show float-right">Follow</div> 
    </form> 
</div> 

jQuery를

$('.follow-show').bind('click', function() { 
     var button = $(this); 
     var show_id = button.closest("#show_id").val(); 
     var user_id = button.closest("#user_id").val(); 
}); 

Answer 1

중복 된 아이디의 사용하지 마십시오, 당신은 당신은 사용할 수 없습니다 클래스 대신,

당신은 대신 closest

var button = $(this); 
var show_id = button.siblings("#show_id").val(); 
var user_id = button.siblings("#user_id").val(); 

Answer 2

의 siblings를 사용할 필요가 사용할 수 있습니다 2 개의 요소에 대해서 같은 id. 수업 시간을 조정하십시오. jquery 형제 메서드를 사용하여 선택했습니다.

<div class="two columns"> 
<form class="float-right"> 
    <input type="hidden" class="show_id" value="329"> 
    <input type="hidden" class="user_id" value="172"> 
    <a id="follow-button" class="button small follow-call follow-show float-right">Follow</a> 
    </form> 
</div> 

<div class="two columns"> 
<form class="float-right"> 
    <input type="hidden" class="show_id" value="330"> 
    <input type="hidden" class="user_id" value="173"> 
    <a id="follow-button" class="button small follow-call follow-show float-right">Follow</a> 
    </form> 
</div> 

jQuery를 여기

$('.follow-show').bind('click', function() { 

     var button = $(this); 
     var show_id = button.siblings(".show_id").val(); 
     var user_id = button.siblings(".user_id").val(); 

     alert(show_id); 
     alert(user_id); 
}); 

샘플 바이올린 : 가장 가까운 http://jsfiddle.net/

Answer 3

는 항상 부모 요소 만 작동합니다. 가장 가까운 자식 요소를 선택하지 않습니다. 형제는 항상 아래쪽 요소를 확인합니다.

<div id="div1">Nitin </div> 
<ul class="level-3"> 
    <li class="item-1">1</li> 
    <li class="item-2">2</li> 
    <li class="item-3">3</li> 
</ul> 

jQuery를 :

가

$('.level-3').closest('#div1').css('background-color', 'red'); 
//Select nothing 

$('.item-1').closest('li').css('background-color', 'red'); 
//Mark 1 as red 

$('.item-1').closest('ul').css('background-color', 'red'); 
//Mark <ul class="level-3"> as red. 

$('.item-1').siblings('li').css('background-color', 'green'); 
//Mark 2 and 3 as green`