Jquery :not selector doesn't work with style on class

I am trying to make product pages for my website, unfortunately i am failing in Javascript to hide any other displays except specific page.

First of all, i wrapped up every 24 div's in single div:

var lis = $(".products li");
for(var i = 0; i < lis.length; i+=24) {
  lis.slice(i, i+24)
     .wrapAll("<div class='products'></div>");

Then i gave each object of class, it's id:

$('.products').each(function(i, obj) {
    if (i > 0) {
       obj.id = "p" + i

I have tested if it could work, and it did.

After that, i made GET request so user would choose the page.

{{ currentpagen }} was the value of GET request, for example, in this case, 1.

Then i have added the code, so all other divs would be hidden, except current page one:

   $(".products:not(#p + {{ currentpagen }})").css("display", "none"); 
   $('#p' + {{ currentpagen }}).css("display", "flex");

and it would not work, All elements would be hidden, including one's that shouldn't be hidden by idea, for example, all element's should've been hidden in this case, except #p1.

So what could the problem be? Is there any better way to do this? Id's obviously work since i have tried changing their style, but i think it's something with :not selector.

If you wonder what double curly braces are for, It is used in Django for moving variables from System to HTML, So whenever i get value of GET request, i transfer variable to HTML and then use it with double curly braces {{}}.

Answers 1

  • You should watch out what your templating system is doing with your JavaScript code.

    IMHO this could work better:

    $(".products:not(#p" + {{ currentpagen }} + ")").css("display", "none"); 

    The result should be this:

    enter image description here

Related Articles