remove ::after when only one item is displayed

Question

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.

Fiddle: 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");
});
});

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

Your demo and code doesn't seem to match your question. You don't have any `::after` selector there. Also you haven't included any footer which you mention being the problem. — U r s u s, Jan 13 '15 at 15:17
OK good point. I've added a new piece of code to the bottom which doesn't work but gives you an idea of what i'm trying to do. — Amesey, Jan 13 '15 at 15:18
because i'm using a jQuery filter system and the number of items show and hide depending on what is checked. — Amesey, Jan 13 '15 at 15:43

score 3 · Answer 1 · answered Jan 13 '15 at 15:28

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>

thanks, this is a good idea but it doesn't work with my filter system which shows and hides items. A class need to be added via jquery so I can hide the ::after on the fly. — Amesey, Jan 13 '15 at 15:33

score 0 · Answer 2 · 2015-01-14T12:22:57.063

0

You can test if there is only one:

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

if false, then use jQuery.append() instead css::after

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

Check it:

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

About the above code:

if the first is NOT equal the last, in other words: if there is NOT only one, then add the class

It works well

edited Jan 14 '15 at 12:22

answered Jan 13 '15 at 15:18

1

much easier to check length – charlietfl Jan 13 '15 at 15:20
I added this but doesn't work... `$(function () { if( $("div.portfolio-item").first()[0] === $("div.portfolio-item").last()[0] ) { $("div.portfolio-item").addClass("one-item"); } });` I'm trying to add a class if only 1 item – Amesey Jan 13 '15 at 15:21
will not test the opposite of what i want? I want to add a class if only one item. – Amesey Jan 13 '15 at 15:24
i've updated the fiddle but my code adds the class `.one-item` to every item http://jsfiddle.net/amesy/1ku221ds/2/ – Amesey Jan 13 '15 at 15:34

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

Was fixed here by https://stackoverflow.com/users/2048391/jyrkim

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

edited May 23 '17 at 11:59

Community

1
1

answered Jan 13 '15 at 16:06

Amesey

822
2
16
33

remove ::after when only one item is displayed

3 Answers3

Linked