使用 jquery 查找最后 2 个孩子答案

【问题标题】：find last 2 children using jquery使用 jquery 查找最后 2 个孩子
【发布时间】：2015-11-17 21:45:49
【问题描述】：

我的 HTML 是这样的

<div class="accordion_example2 smk_accordion acc_with_icon"> 
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            19714320
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
             
                <li>
                    Break Load (kg) 6.05
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-blue">
            <div class="acc_icon_expand"></div>
            mere test tekst …
        </div>
        <div class="acc_content accordian-content" style="display: none;">
            <ul>
              
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            test tekst
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
</div>

我想找到最后两个accordion_in 元素并从中删除其子元素accordian-content。我怎样才能通过 Jquery 实现这一点？我的预期输出是这样的

<div class="accordion_example2 smk_accordion acc_with_icon"> 
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            19714320
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
             
                <li>
                    Break Load (kg) 6.05
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-blue">
            <div class="acc_icon_expand"></div>
            mere test tekst …
        </div>
        
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            test tekst
        </div>
        
    </div>
</div>

【问题讨论】：

请提供尝试过的解决方案、它们为什么不起作用以及预期的结果。谢谢！
复制stackoverflow.com/questions/1257233/…
stackoverflow.com/questions/1948152/…

标签： javascript jquery html

【解决方案1】：

试试这个：您可以使用.slice() 获取最后两个元素，然后从中删除accordian-content div。

$(function(){
  $('div.accordion_example2 .accordion_in').slice("-2").find(".accordian-content").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion_example2 smk_accordion acc_with_icon"> 
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            19714320
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
             
                <li>
                    Break Load (kg) 6.05
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-blue">
            <div class="acc_icon_expand"></div>
            mere test tekst …
        </div>
        <div class="acc_content accordian-content" style="display: none;">
            <ul>
              
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            test tekst
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以使用 de :nth-last-of-type 选择器来做到这一点

$(".class:nth-last-of-type(-n+2)") 选择最后 2 个 .class 元素。

在你的情况下：

$(".accordion_in:nth-last-of-type(-n+2)").children(".accordian-content").remove();

或者使用查找： $(".accordion_in:nth-last-of-type(-n+2)").find(".accordian-content").remove();

编辑：必须是 -n+2 而不是 2。

【讨论】：

实际上，不。 nth 表示每第 n 个，而不是最后的第 n 个。这个选择器中的最后一个只是意味着它从末尾而不是从开头开始计数
实际上你的编辑工作：jsfiddle.net/9m0m8hcd 但你知道这个功能不是为了这样做吗？切片绝对是更好的选择！

【解决方案3】：

可以使用:gt() 选择器，并且通过使用负值，它将从最后开始工作。需要 jQuery 1.8+

$('.accordion_in:gt(-3)').find('.acc-content').remove();

参考：:gt() selector docs

【讨论】：

或在一个选择器中：$('.accordion_in:gt(-3) > .acc_content').remove();