Question

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

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

...的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");
});
});

所以我添加了这个不起作用的功能，但是你知道我正在做什么......

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

Answer 1

如果要在只有一个子节点时删除::after伪元素，可以使用:only-child伪类：

.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>

Answer 2

您可以测试是否只有一个：

if( $("div.portfolio-item").first()[0] === $("div.portfolio-item").last()[0] )

如果为false，则使用 jQuery.append（）而不是 css :: after

$("div.portfolio-item").append("your content");

检查：

var items = $("div.portfolio-item:visible");
if( items.first().get(0) !== items.last().get(0) ){
    items.addClass("one-item");
}

关于上述代码：

如果第一个不等于最后一个，换句话说：如果不只有一个，那么添加类

效果很好

Answer 3

由https://stackoverflow.com/users/2048391/jyrkim

修复

Remove from DOM and add back again when check box true or false

删除::之后只显示一个项目

3 个答案: