replaceWith가 하위 클래스와 호환되지 않습니다.

Question

대체 클래스를 replaceWith로 사용하는 것 같습니다. 다른 방법으로해야합니까?

<ul> 
<li><input type="text" class="fn" value="Elvis"> <a href="#" class=".rmv" onclick="test()">test</a></li> 

<li><input type="text" class="fn" value="Sam"> <a href="#" class=".rmv" onclick="test()">test</a></li> 
</ul> 

<script> 
function test() { 
$(this).find('.fn').val().replaceWith('Ted') 
} 
</script> 

Answer 1

그냥 (!) 참고로 - 당신은 잘못된 앵커 태그에 클래스를 사용하고 - 이미 jQuery를 사용하고있는대로

<a href="#" class="rmv"> 

대신

<a href="#" class=".rmv"> 

해야합니다, 당신은 단지 수

$(document).ready(function() { 
 
    $(".rmv").click(function (e) { 
 
     e.preventDefault(); 
 
     $(this).prev('.fn').val('Ted'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <input type="text" class="fn" value="Elvis" /> <a href="#" class="rmv">test</a> 
 

 
    </li> 
 
    <li> 
 
     <input type="text" class="fn" value="Sam" /> <a href="#" class="rmv">test</a> 
 

 
    </li> 
 
</ul>

이 같은 jQuery를 사용하여 click() 이벤트를 첨부

Answer 2

jQuery .val()은 INPUT 태그의 값을 가져 오는 데만 사용할 수 있습니다.

는 경우에, 당신은 '.val (NEWVALUE를)'를 사용해야 값을 설정하려면 다음

$(this).find('.fn').val('Ted'); 

편집 : 당신은 지금이 문제를 해결하지만, 완성도, 여기에 몇 가지 수도 jsfiddle 스크립트가 작동하도록 더 많은 변경.

test이 전역으로 검색되도록 '로드하지 않음'으로 자바 스크립트의로드 유형을 설정해야합니다.

그런 다음, 당신은 또한 수신자 개체를 전달할 필요가 당신의 연결에 onclick 사용하여이 같은 콜백에, test(this)을 :

<li><input type="text" class="fn" value="Elvis"> <a href="#" class=".rmv" onclick="test(this)"> 
test</a></li> 

마지막으로, <input> 태그를 참조하고 값을 변경하기 위해, 이러한 변화와

function test(e) {  
    $(e).parents('li').find('.fn').val('Ted'); 
} 

의의 가치 : 한 가지 방법은 <li> 태그까지보고이 같은 jQuery와 다음 아래에 <input class="fn">하는 것입니다 대응하는 <a> 요소가 클릭 된 <li>에 포함 된은 Ted으로 변경됩니다.