How to use jQuery :not selector for more than one element at a time

Question

I want to use the jquery :not selector in such a way that when a bunch of elements don't have a specified class, then i want to add a class to one of them.

What I want to achieve is: 'when design-preview1, design-preview2 design-preview 3 and design-preview 4 do not have the class "selected", add class "selected" to "design-preview1" '.

I tried this but it is not working:

   $(".design-preview1, .design-preview2, .design-preview3, .design-preview4").not(".selected").$(".design-preview1").addClass('selected');
    });

Any help would be highly appreciated

New

This is my full jQuery code:

$('.pop-design1').click(function(){
            $(".design-preview li:not(.design-preview2).selected").removeClass('selected');
            $(".design-list li:not(.design-list2).selected").removeClass('selected');
            $(".design-preview2").toggleClass('selected');
            $(".design-list2").toggleClass('selected');
            $(".overlay").toggle();
        });
        $('.pop-design2').click(function(){
            $(".design-preview li:not(.design-preview3).selected").removeClass('selected');
            $(".design-list li:not(.design-list3).selected").removeClass('selected');
            $(".design-preview3").toggleClass('selected');
            $(".design-list3").toggleClass('selected');
            $(".overlay").toggle();
        });
        $('.pop-design3').click(function(){
            $(".design-preview li:not(.design-preview4).selected").removeClass('selected');
            $(".design-list li:not(.design-list4).selected").removeClass('selected');
            $(".design-preview4").toggleClass('selected');
            $(".design-list4").toggleClass('selected');
            $(".overlay").toggle();
        });
        if ($('.design-preview1, .design-preview2, .design-preview3, .design-preview4').not('.selected').length) {
    $('.design-preview1').addClass('selected');

Basically what I want is that when .design-preview1, .design-preview2, .design-preview3 and .design-preview4 are not showing or are not selected, I want .design-preview1 to show by default.
Live link: http://www.expertfrontend.com/test/2.html

Answer 1

:not is a little too simple for what you are trying to do, as you need to change the class of multiple elements, and not all the same way. So, you're going to need a few steps. Among other things, you need to use the .filter method to determine whether any of your tags have the selected class:

var group = ".design-preview1, .design-preview2, .design-preview3, .design-preview4",
    $group = $(group);

function doDefaultSelection() {
    if ($(".design-preview1, .design-preview2, .design-preview3, .design-preview4")
        .filter(".selected").length === 0) { // note use of .filter here
        $(".design-preview1").addClass('selected');
    }
}

doDefaultSelection();

$group.click(
    function() {
        $group.not(this).removeClass('selected');
        $(this).toggleClass('selected');
        doDefaultSelection();
    }
);

The default selector function (doDefaultSelection) selects all elements with your designated classes, picks only ones that have the selected class, and checks to see if there are any left. If there are no matching elements, then it adds the selected class to the .design-preview1 element(s).

The click handler turns off the selected class for everything except for the clicked element, then toggles the class for the one you clicked on. It then sets the default again if necessary.

Demo

var group = ".design-preview1, .design-preview2, .design-preview3, .design-preview4",
    $group = $(group);

function doDefaultSelection() {
    if ($(".design-preview1, .design-preview2, .design-preview3, .design-preview4")
        .filter(".selected").length === 0) {
        $(".design-preview1").addClass('selected');
    }
}

doDefaultSelection();

$group.click(
    function() {
        $group.not(this).removeClass('selected');
        $(this).toggleClass('selected');
        doDefaultSelection();
    }
);

.selected {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="design-preview1">blah</p>
<p class="design-preview2">blah</p>
<p class="design-preview3">blah</p>
<p class="design-preview4">blah</p>

Answer 2

What I want to achieve is: when design-preview1, design-preview2 design-preview 3 and design-preview 4 do not have the class "selected", add class "selected" to "design-preview1"

As requested in your question, you said you want to use .not() to achieve this. Below is a way you can do this via the addSelectedClassIfNotExists() function.

You can also refactor your click listeners, so you only run one defined function. Below is what your modified code from your question could look like after the suggested changes:

var previews = $('.design-preview1, .design-preview2, .design-preview3, .design-preview4');

function addSelectedClassIfNotExists() {
    if (previews.not('.selected').length === previews.length) {
        $('.design-preview1').addClass('selected');
    }
}

function toggleClasses(num) {
    $('.design-preview li:not(.design-preview' + num + ').selected').removeClass('selected');
    $('.design-list li:not(.design-list' + num + ').selected').removeClass('selected');
    $('.design-preview' + num).toggleClass('selected');
    $('.design-list' + num).toggleClass('selected');
    $('.overlay').toggle();
}

previews.click(function () {
    toggleClasses(this.className.slice(-1));
    addSelectedClassIfNotExists();
});