jQuery selector by classname minus classname

Question

I have the following jquery line in a click event of a p element:

$(this).nextUntil('.Maintheme not:.Document')

I would like to get all the next elements with class .Maintheme but not .Document.

To explain myself a little better, this is the html that i have:

<div id="DocumentContents">

<p class="Maintheme">ParentTheme1</p>
<p class="Document">Document1</p>
<p class="Maintheme">ParentTheme2</p>
<p class="Subtheme">SubTheme1</p>
<p class="Document">Document1</p>
<p class="Document">Document2</p>
<p class="Document">Document3</p>
<p class="Subtheme">SubTheme2</p>
<p class="Document">Document1</p>
</div> 

Having this html content i would like that when you click in a p element if there is not subthemes then show documents. Else if there are subthemes with documents below, just show the subthemes, and if you click in a subtheme show the next documents.

Any help would be appreciated.

Thanks in advance.

Best Regards.

Jose

Answer 1

You should use .nextAll().

var $themes = $(this).nextAll('.Maintheme');

You have to do some if-statements from there to create the logic you want.

if($themes.length){
}
else{
}

Anyways, this looks odd to me. You should use a nested list for instance to display such kind of structures.

Ref.: .nextAll()

Answer 2

You don't have the not syntax quite correct but it's not clear to me exactly what you are asking for so I won't try and correct it for you, just point you at the reference. I agree that this looks a bit off anyway.

Answer 3

I think that the not() jQuery selector is more suitable for your case since the nextUntil() selector will stop gathering the elements with the Maintheme class on the first occurence of p tag styled with Document class. Hence you can use code slice like this:

$(this).not(':.Maintheme').css(hidePtagsWithDocumentclass);

Answer 4

Something like this?

Example: http://jsfiddle.net/ZSCs3/

$('p:not(.Maintheme)').hide();

$('.Maintheme').click(function() {
    var $this = $(this)
    if ($this.next('.Subtheme').length) {
        $this.nextUntil('.Maintheme').filter('.Subtheme').toggle();
    } else {
        $this.nextUntil('.Subtheme,.Maintheme').toggle();
    }
});

$('.Subtheme').click(function() {
    $(this).nextUntil('.Subtheme,.Maintheme').toggle();
});