jQuery与CSS的上一个子冲突

问题描述

现在我有一个评论日志列表，我目前正在切换此列表以显示更多评论或隐藏一些评论。 在我放入此jquery以显示/隐藏某些列表之前，我为

:last-child { border: none; }

类的

.review

包装使用了一些CSS，直到我放入此jquery为止。 我的问题是，为什么在实现此jquery时突然使此CSS选择器在样式表中不起作用？我也试图只是做jquery中的最后一个孩子，它在那儿也不起作用。

function reviewlistCutoff() {
    var hiddenReviews = $(\'.reviewWrap:gt(6)\').hide();

    if (hiddenReviews.size() > 0) {
        var showCaption = \'...\' + hiddenReviews.size() + \' More Reviews\';
        $(\'.reviewsList\').append(
        $(\'<span class=\"toggler\">\' + showCaption + \'</span>\').toggle(

        function () {
            hiddenReviews.show();
            $(this).text(\'...Fewer Reviews\');

        },function () {
            hiddenReviews.hide();
            $(this).text(showCaption);
        }));

    }
}

    

解决方法

        

.reviewWrap:last-child

工作正常。 问题是您要隐藏最后5个左右的

.reviewWraps

，而最后一个是

:last-child

所选择的。 您真正想要的是从最后一个可见的

.reviewWraps

中删除

border-bottom

。 幸运的是，有一种更好的方法可以解决此问题。 您可以改为使用

border-top

和

:first-child

： http://jsfiddle.net/TJctn/6/

.reviewWrap { border-top: 1px solid #C9C9C9; margin: 0 0 20px; padding: 0 0 20px; }      
.reviewWrap:first-child { border-top: 0; margin: 0; padding: 0; }

您的第一个

.reviewWraps

将删除

border-top

。 我不确定您要如何使用

margin

和ѭ14what做些什么，但是您应该可以将它们调整为完美。