仅显示一项时删除:: after [英] remove ::after when only one item is displayed

问题描述

当仅显示一个div.portfolio-item时，我需要删除::after.原因是因为图像附在每个项目上，但是当只有一个项目时，它与页脚冲突.我在想，如果只有一次，那么应该添加一个称为单项"的类，这样我就可以通过CSS控制:: after.

I need to remove the ::after when only one div.portfolio-item is displayed. The reason being is because an image is attached to each of the items but when there is only one item it conflicts with the footer. I'm thinking that if there is only one time then a class should be added called one-item, that way I can control the ::after via CSS.

提琴: http://jsfiddle.net/amesy/1ku221ds/

jQuery ...

jQuery...

function StringContainsAllItems(stringVal, items) {
if (items.length == 0 || items.length == null) {
    return false;
}

for (var i = 0; i < items.length; i++) {
    console.log("Item: " + items[i]);
    if (stringVal.indexOf(items[i]) == -1) {
        return false;
    }
}

return true;
}

$(function () {
//initialize first item
$('div.portfolio-item:visible:first').addClass("first-item");

var $checkboxes = $("input[id^='type-']");
$('input[type=checkbox]:checked').attr('checked', false);

$checkboxes.change(function () {
    if ($('input[type=checkbox]:checked').length > 0) {

        var selectorArray = [];

        $checkboxes.filter(':checked').each(function () {
            selectorArray.push($(this).attr('rel'));
            console.log($(this).attr('rel'));
        });

        $('[data-category]').hide() // hide all rows
        .filter(function () {
            return StringContainsAllItems($(this).data('category'), selectorArray);
        }).show(); // reduce set to matched and show    
    } else {
        $('[data-category]').show();
    }

    $('div.portfolio-item').removeClass("first-item");

    $('div.portfolio-item:visible:first').addClass("first-item");
});
});

因此，我添加了此功能，该功能无法正常工作，但您了解我要执行的操作...

So I added this function which doesn't work but you get an idea of what i'm trying to do...

$(function () {
var numItems = $('div.portfolio-item:visible').length;
if (numItems === 1) {
    $('div.portfolio-item:visible').addClass("one-item");
}
});

推荐答案

如果要在只有一个孩子的情况下删除::after伪元素，则可以使用

If you want to remove an ::after pseudo-element when there is only one child, you can use the :only-child pseudo-class:

.portfolio-item:after {
    content: 'foo';
}
.portfolio-item:only-child:after {
    content: none; /* or normal, unset, initial */
}

.portfolio-item:after {
  content: 'foo';
}
.portfolio-item:only-child:after {
  content: none;
}

<div>
  <div class="portfolio-item"></div>
</div>
<hr />
<div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
</div>

这篇关于仅显示一项时删除:: after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！