如何隐藏容器中的最后一个元素？

Question

https://jsfiddle.net/Lyuz233f/1/

我只想隐藏我的上一个hr，但我不明白为什么我的所有hr都被隐藏了：

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center" style="margin-bottom:50px">
            <h4 class="uppercase mb16">Something</h4> </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="post-snippet mb64" style="margin-bottom:0px">
                <div style="text-align:justify">
                    <p>one</p>
                </div>
                <hr/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="post-snippet mb64" style="margin-bottom:0px">
                <div style="text-align:justify">
                    <p>two</p>
                </div>
                <hr/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="post-snippet mb64" style="margin-bottom:0px">
                <div style="text-align:justify">
                    <p>three</p>
                </div>
                <hr/>
            </div>
        </div>
    </div>
</div>

<script>
  $( ".container hr:last-child" ).css({ display:"none"});
</script>

Answer 1

尝试此操作隐藏最后一个hr元素：

$(".container hr:last" ).css({ display:"none"});

以下是实施此解决方案的JsFiddle。

Answer 2

您的代码无效，因为当您尝试选择给定父级的last-child元素时，这将查找该父元素的直接后代，在本例中为.container元素。尝试选择.row中的最后一个.container，这将举例说明我刚才所说的内容：

$( ".container .row:last-child hr" ).css({ display:"none"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center" style="margin-bottom:50px">
            <h4 class="uppercase mb16">Something</h4> </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="post-snippet mb64" style="margin-bottom:0px">
                <div style="text-align:justify">
                    <p>one</p>
                </div>
                <hr/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="post-snippet mb64" style="margin-bottom:0px">
                <div style="text-align:justify">
                    <p>two</p>
                </div>
                <hr/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="post-snippet mb64" style="margin-bottom:0px">
                <div style="text-align:justify">
                    <p>three</p>
                </div>
                <hr/>
            </div>
        </div>
    </div>
</div>

Answer 3

您也可以使用此解决方案作为替代

$(".container hr:last" ).hide();

OR

$( ".container .row:last-child hr" ).hide();