切换直接孩子的课程答案

【问题标题】：Toggle class on direct children切换直接孩子的课程
【发布时间】：2017-02-16 00:47:51
【问题描述】：

我有几个具有相同类的 div。我希望能够通过点击功能独立地切换每个孩子的班级。

if($("div").hasClass("subLinkPage")) {
    $(".sub-expand_collapse").children(".fa").toggleClass('fa-minus fa-plus');
}

我要向这个脚本添加什么，以便它只在每个脚本的直接子级上运行。

感谢您的任何建议

HTML

  <div class="subLinkPage"> 
    <ul aria-labelledby="headLnk_02" class="nav__items">
        <li class="sub_p01 togSubList">

             <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </a>

            <a id="subLnk_01" class="parent_link menu_p01" href="../content/m04/m04_c02_p01.html">Facebook feed</a>            
            <ul class="sub_items sub_items_01">
                <li><a href="../content/m04/m04_c02_p01-a.html" class="menu_p01a">Adding a Facebook feed<br/>to the home page</a></li>
            </ul>
        </li>
        <li class="sub_p02 togSubList">


            <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu">
              <i class="fa fa-plus" aria-hidden="true"></i>
            </a>

            <a id="subLnk_02" class="parent_link menu_p02" href="../content/m04/m04_c02_p02.html">Twitter feed</a>            
            <ul class="sub_items sub_items_02">
                <li><a href="../content/m04/m04_c02_p02-a.html" class="menu_p02a">Adding a Twitter<br/>feed web part</a></li>
            </ul>
        </li>       
    </ul>
</div>

【问题讨论】：

请提供一些html结构，目前还不清楚您要检查“点击”事件的元素。
没有不是.sub-expand_collapse 的直接子元素的.fa 元素。它不应该切换哪些元素？
添加 HTML 是不够的。您点击的是什么元素，点击时应该切换哪些元素，应该不切换哪些元素？
我将不得不重新考虑这一点并更新帖子详细信息。

标签： jquery children

【解决方案1】：

您可以使用直接子 jQuery selector (parent > child)

$("div.subLinkPage").on('click', function() {
  $(this).find(".sub-expand_collapse > .fa").toggleClass('fa-minus fa-plus');
});

【讨论】：

你们真的在帮我思考这个问题
你不需要.filter，只需使用选择器$("div.subLinkPage")

【解决方案2】：

如果它在 .click 事件中，请使用 $(this) 而不是 $(".sub-expand_collapse")

【讨论】：

【解决方案3】：

您可以执行$("MyElement > MyElementsChild").remove(); 之类的操作
">" 表明它是一个子元素。

【讨论】：

这仍然会影响所有应用了 .sub-expand_collapse 的子节点
@LaurenceL > CSS 运算符只匹配直接子代，而不是所有子代。这应该有效。请使用 HTML 更新您的问题，并清楚说明您希望影响哪些元素。
现在没问题