동일한 요소 안에있는 단일 요소 만 선택하십시오. jQuery 선택자

Question

그래서 정렬되지 않은 목록이 있습니다. 목록의 각 항목에는 게시물 주석 텍스트 영역을 토글하는 버튼이 있습니다. 불행히도 첫 번째 시도를 할 때 하나의 게시물 설명 단추를 클릭하면 모든 텍스트 영역이 열리고 다음을 사용하여 하나의 요소 만 선택되었는지 확인하려고했습니다. 당신이 실제 요소의 부모에 도착하는 내 가난한 사람의 시도를 참조하고 우리가 필요로하는 요소를 찾을 수 있습니다 여기 내 jQuery 코드

$(".postComment").click(function() { 
      $(this).parent().find(".showMe").toggle(); 
     }); 

됩니다

<ul class="todosDisplay"> 
<li><span>Content of todo</span><a class="postComment">Post Comment</a> 
    <textarea class="showMe"></textarea> 
</li> 
<li><span>Content of todo</span><a class="postComment">Post Comment</a> 
    <textarea class="showMe"></textarea> 
</li> 
<li><span>Content of todo</span><a class="postComment">Post Comment</a> 
    <textarea class="showMe"></textarea> 
</li> 
</ul> 

그리고 다음은 코드입니다 토글이 작동하지 않습니다.

미리 감사드립니다.

Answer 1

당신은 jQuery의 $ .closest (". showMe") 함수를 사용할 수 있습니다.

Answer 2

Visual Studio에서이 기능을 구현하면 제대로 작동하는 것 같습니다. 위 예제에서 주목해야 할 점은 href가 anchor 태그에서 누락되어 IE가 링크로 렌더링되지 않는 것입니다. 나는 href = "#"를 추가했고 당신의 코드가 나를 위해 일하는 것처럼 보였다. 링크를 클릭하면 텍스트 영역이 올바르게 닫힙니다.

<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".postComment").click(function() { $(this).parent().find(".showMe").toggle(); }); 

    }); 
</script> 

<ul class="todosDisplay"> 
    <li><span>Content of todo</span><a class="postComment" href="#">Post Comment</a> 
     <textarea class="showMe"></textarea> 
    </li> 
    <li><span>Content of todo</span><a class="postComment" href="#">Post Comment</a> 
     <textarea class="showMe"></textarea> 
    </li> 
    <li><span>Content of todo</span><a class="postComment" href="#">Post Comment</a> 
     <textarea class="showMe"></textarea> 
    </li> 
</ul> 

Answer 3

나는에 jQuery를 변경 제안 :

$(".postComment").click(function(){ 
    $(this).siblings(".showMe").toggle(); 
    return false; 
});