jquery隐藏/显示特定的li子元素答案

【问题标题】：jquery hide/show particular li child elementsjquery隐藏/显示特定的li子元素
【发布时间】：2014-05-30 14:27:52
【问题描述】：

我有一些像这样的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 的隐藏子项？或者通过他们的班级或ID显示特定的孩子？我不确定最好的方法是什么。

【问题讨论】：

ng- 属性表明这是一个 angular.js 应用程序。您为什么只想使用 jquery 来添加此功能？
如果您使用的是 Angular，那么您实际上并不需要 jQuery 来执行此操作。
关心扩大伙计们？我是 Angular（和 jquery）的新手，所以我不知道所有的功能。至少给我一些谷歌的条件。
我认为 OP 将受益于如何在 Angular 和 jQuery 中执行此操作的一些代码示例，因此他可以了解每个库的等效功能

标签： javascript jquery html angularjs dom

【解决方案1】：

混合使用 jquery 和 angularjs（尤其是在控制器中）会导致很多痛苦。这可以通过 Angular 轻松完成。 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>

【讨论】：

谢谢！我打算这样做。我没有将此标记为答案，因为这不是我问的问题。（但这是我应该问的问题）。
但这是您问题的答案。将 jquery 与 angular 混合并不是一个好的编码习惯。

【解决方案2】：

你会想要使用 jQuery 的 siblings() 函数。

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

这里有更多关于这个函数的细节：https://api.jquery.com/siblings/

【讨论】：