0

I'm trying to remove elements from the DOM only need to be inserted back in again when the corresponding checkbox filter is either true or false. currently i have display none or block, but the reason I want to remove the elements altogether is because I have a specific style on the first child giving it more padding at the top. So currently when I change the filter and a new item is displayed first it currently does not have the padding applied which I need.

The fiddle: http://jsfiddle.net/amesy/kwqpf5fv/6/

The code in the fiddle above...

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() { 
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();   
        }
});    
});
Amesey
  • 822
  • 2
  • 16
  • 33
  • what about taking the 'hidden' elements and append them to your document? this would achieve the same result, but you need something to restore the correct order... – errand Jan 13 '15 at 12:30
  • So instead of removing them just change the order back and fourth? – Amesey Jan 13 '15 at 12:32
  • yes - you have two options - hiding, and moving in the dom or removing from the dom - i always choose depending on element size and chances, that they get reinserted... – errand Jan 13 '15 at 13:07

1 Answers1

1

I'm not sure if you had this in mind, but by applying the following selector:

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

You can add the class: first-item for the first visible div (with class portfolio-item), that can be used to apply special styles for the first div. I discovered the usefulness of :visible selector at this answer.

Altogether, two lines of code have been added into $checkboxes.change function:

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

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

The first line just clears the previous first-item selection.

Fiddle

Community
  • 1
  • 1
jyrkim
  • 2,849
  • 1
  • 24
  • 33
  • I don't know wether to start a new post or to continue here, but basically i need to remove the ::after on div.portfolio-item when there is only one item displayed. Do you think this straight forward enough? – Amesey Jan 13 '15 at 14:32
  • 1
    @Amesey I'm not 100% where to use it but you could check the visible count: var visibleCount = $('div.portfolio-item:visible').length; Then you can use it in a if-statement: if (visibleCount === 1) .. . So you probably need to move/copy those two lines that remove & addClass 'firstItem' to two or three places in the $checkboxes.change function. I'm not sure did I explain clearly, so feel free to ask more clarification :-) – jyrkim Jan 13 '15 at 14:53
  • thanks, i just created a new post, will have a play around with the code in the mean time. http://stackoverflow.com/questions/27924839/remove-after-when-only-one-item-is-displayed – Amesey Jan 13 '15 at 15:03
  • 1
    @Amesey okay, I updated your Fiddle a bit, I added if/else handling and a new class 'one-item' that has background-color: turquoise . Fiddle http://jsfiddle.net/jyrkim/1ku221ds/1/ It's still a bit unclear about ::after but now there's if (visibleCount === 1) selector that you can use for your special handling. Good Luck. – jyrkim Jan 13 '15 at 15:23
  • Thats exactly what i'm after, impressive :) – Amesey Jan 13 '15 at 16:05
  • 1
    @Amesey, Excellent :-) If you need to add some external resources like stylesheets (Bootstrap and etc) or js libraries for Fiddles at JSFiddle.net, then you can quite easily add them. Here is a guide http://doc.jsfiddle.net/basic/introduction.html#external-resources Anyway, great that it worked. – jyrkim Jan 13 '15 at 16:20
  • Thanks, this is a great help :) Sorry to ask again but I've just realised that I need to remove the `::after`from the last item too using jQuery, shall i create a new post? – Amesey Jan 13 '15 at 16:24
  • @Amesey, yep please do make a new question, I'm not that familiar with ::after Also, I'm going to play some basketball pretty soon :-) – jyrkim Jan 13 '15 at 16:30
  • I just worked it out for myself and added `$('div.portfolio-item:visible:last').addClass("last-item");` to the else statement. Enjoy your basketball, thanks again :) – Amesey Jan 13 '15 at 16:41