이 변수를 사용하여 공백 값 가져 오기

Question

이 연산자를 사용하여 앵커 태그 클릭시 공백 값이 표시됩니다. 나는 같은 클래스의 여러 div를 가지고 있는데 왜 내가 .each() 함수를 사용했는지, 어디에서 잘못했는지 모른다. 출력 수, 클릭 하나에 첫 번째 값 입력에 표시되어야한다 등 에 여기 내 코드

$(document).ready(function(){ 
 
    $('.main').each(function(){ 
 
    $('a',this).click(function(){ 
 
     $val = $('p',this).text(); 
 
     $("#aarti").val($val); 
 
     alert($val); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <p>value one</p> 
 
    <div id="sub" style="display: block;"> 
 
    <p><a href="#" data-toggle="modal" data-target="#myContactModal">CLICK ONE</a></p> 
 
    </div> 
 
</div> 
 
<div class="main"> 
 
    <p>value two</p> 
 
    <div id="sub" style="display: block;"> 
 
    <p><a href="#" data-toggle="modal" data-target="#myContactModal">CLICK TWO</a></p> 
 
    </div> 
 
</div> 
 
<div class="main"> 
 
    <p>value three</p> 
 
    <div id="sub" style="display: block;"> 
 
    <p><a href="#" data-toggle="modal" data-target="#myContactModal">CLICK THREE</a></p> 
 
    </div> 
 
</div> 
 
<div class="main"> 
 
    <p>value four</p> 
 
    <div id="sub" style="display: block;"> 
 
    <p><a href="#" data-toggle="modal" data-target="#myContactModal">CLICK FOUR</a></p> 
 
    </div> 
 
</div> 
 
<input type="text" id="aarti" />

Answer 1

, 다음 목표 p 요소를

jQuery(document).ready(function() { 
 
    $('.main a ').click(function(e) { 
 
    e.preventDefault(); 
 
    var $val = $(this).closest('.main').children('p').text(); 
 
    $("#aarti").val($val); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <p>value three</p> 
 
    <div id="sub" style="display: block;"> 
 
    <p><a href="#" data-toggle="modal" data-target="#myContactModal">CLICK THREE</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="main"> 
 
    <p>value four</p> 
 
    <div id="sub" style="display: block;"> 
 
    <p><a href="#" data-toggle="modal" data-target="#myContactModal">CLICK FOUR</a> 
 
    </p> 
 
    </div> 
 
</div> 
 

 

 
<input type="text" id="aarti" />

Answer 2

주요 클래스를 통해 루프 필요가 없습니다이다. 그냥이 시도 당신이 원하는 주를 클릭 this 그것을 얻을 것이다 당신

을위한 나머지 작업을 수행 할 수 있습니다 자식

당신은 부모 main 요소까지 통과해야합니다

$(document).on('click','.main',function(){ 
    $("#aarti").val($(this).find('p').html()); 
}); 

Answer 3

$('.main').on('click', 'a', function(e) { 
     var $val = $(this).find('p').text();   
     alert($val); 
}); 

도움이