How to use in jQuery :not and hasClass() to get a specific element without a class

JavascriptJqueryHtmlAccordion

Javascript Problem Overview


I have this line of code:

$('#sitesAccordion .groupOfSites').click(function() {
    var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');
    console.log(lastOpenSite);
});

I get "false" instead of getting one of the other elements (assuming that there is one - and there must be). I guess the problem is with:

.hasClass(':not(.closedTab)');

What is the problem?

My purpose is to create my own accordion (without using jQuery UI)

and I am trying to write it like this:

$('#sitesAccordion .groupOfSites').click(function() {

    //Get the last opened tab
    var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');

    //Close last opened tab and add class
    lastOpenSite.hide().toggleClass('closedTab');
    
    //Open the current Tab
    $(this).children('.accordionContent').toggle('fast');

    // remove class from open tab
    $(this).toggleClass('closedTab');


});

Is this the best way? thanks, Alon

Javascript Solutions


Solution 1 - Javascript

Use the not function instead:

var lastOpenSite = $(this).siblings().not('.closedTab');

hasClass only tests whether an element has a class, not will remove elements from the selected set matching the provided selector.

Solution 2 - Javascript

It's much easier to do like this:

if(!$('#foo').hasClass('bar')) { 
  ...
}

The ! in front of the criteria means false, works in most programming languages.

Solution 3 - Javascript

jQuery's hasClass() method returns a boolean (true/false) and not an element. Also, the parameter to be given to it is a class name and not a selector as such.

For ex: x.hasClass('error');

Solution 4 - Javascript

You can also use jQuery - is(selector) Method:

var lastOpenSite = $(this).siblings().is(':not(.closedTab)');

Solution 5 - Javascript

I don't know if this was true at the time of the original posting, but the siblings method allows selectors, so a reduction of what the OP listed should work.

 $(this).siblings(':not(.closedTab)');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlonView Question on Stackoverflow
Solution 1 - JavascriptDennisView Answer on Stackoverflow
Solution 2 - JavascriptQarView Answer on Stackoverflow
Solution 3 - JavascripttechfoobarView Answer on Stackoverflow
Solution 4 - JavascriptSampat BadheView Answer on Stackoverflow
Solution 5 - JavascriptdevRyanView Answer on Stackoverflow