Выберите только один элемент, который находится внутри того же элемента | JQuery селекторы

Question

Итак, у меня есть неупорядоченный список, у каждого элемента в списке есть кнопка, которая должна переключать текстовую область комментария к записи. К сожалению, с моей первой попыткой, когда вы нажимаете одну кнопку «Комментировать», все текстовые области открыты, я попытался использовать это, чтобы убедиться, что выбран только один элемент. Вот код:

<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>

А вот мой код jquery

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

Как вы можете видеть, попытка моего бедняка добраться до родителя элемента ACTUAL, а затем найти элемент, который мы должны переключить, не работает:)

Заранее большое спасибо!

Answer 1

Вы можете использовать функцию jQuery $ .closest (". ShowMe").

Answer 2

Я бы предложил изменить jQuery на:

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

Answer 3

Только что построил это в Visual Studio и, похоже, работает. Единственное, что я заметил в приведенном выше примере, это то, что href отсутствует в тегах привязки, в результате чего 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>