jQuery隐藏/显示特定的li子元素

Question

我有一些这样的html：

<ul id = "postsList">
  <li ng-repeat="post in posts">
    <button class = "deleteButt" ng-click="delButt()">Remove</button>

   <!--hidden div I want to show/hide when the above button is pressed--> 
    <div class = "confirmDeleteBox">
    <button class = "confirmDelete" ng-click = "postDelete(post._id)">Confirm</button>
    </div>

  </li>
</ul>

因此，每个帖子都有一个单击的$('.deleteButt') ，应显示$('div.confirmDeleteBox') ，包括其子元素，但仅适用于该特定帖子。

那么，如何使用jquery显示特定li的隐藏子级？ 还是要按班级或身分显示特定的孩子？ 我不确定执行此操作的最佳方法是什么。

Answer 1

混合使用jquery和angularjs（控制器中的esp）会带来很多麻烦。 通过角度可以很容易地做到这一点。 ngRepeat创建一个子范围， ngRepeat可以工作。

<ul id="postsList">
    <li ng-repeat="post in posts">
        <button class="deleteButt" ng-click="showConfirm = !showConfirm" ng-hide="showConfirm">Remove</button>
        <div ng-show="showConfirm">
            <button class="confirmDelete" ng-click="postDelete(post._id)">Confirm</button>
        </div>
    </li>
</ul>

Answer 2

您想使用jQuery的siblings()函数。

$('.deleteButt').on("click", function (e) {
    $(this).siblings(".confirmDeleteBox").show();
});

此处有关此功能的更多详细信息： https : //api.jquery.com/siblings/