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

Answer 3

You can use the not selector something like this:

var elements = $("p[class^='design-preview']");
elements.each(function(para, i){
if(!$(para).hasClass('selected'))
{
   $(para).addClass('selected');
}
});

What I am doing here is selecting firstly all the para elements with the given class. After that I apply the loop on the array of returned elements and check if the current element has the selected class. If it does not have the selected class we add else we don't add.

Hope this logic helps.

Answer 4

If you want to check if none of them has the class selected then you can use a if condition and add the class to design-preview1

if (!$(".design-preview1, .design-preview2, .design-preview3, .design-preview4").hasClass('selected')) {
    $(".design-preview1").addClass('selected');
}

---

If you want to check whether all of them has the class then

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