Good day.

There is a markup:

<div class="wrapp"> <div class="sidebar-left"></div> <div class="content"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="sidebar-right"></div> </div>

Sidebars are not displayed on all pages.

As with JS, add the class to the .box class:

  1. sider if there is a sidebar-left or sidebar-right .
  2. allsider if both sidebar .

    2 answers 2

     var sidebarLeft = document.getElementsByClassName('sidebar-left'); var sidebarRight = document.getElementsByClassName('sidebar-right'); var boxes = document.getElementsByClassName('box'); if(sidebarLeft.length && sidebarRight.length) for(var i = 0; i < boxes.length; i++) boxes[i].setAttribute('class', boxes[i].getAttribute('class') + ' allsider'); else if(sidebarLeft.length || sidebarRight.length) for(var i = 0; i < boxes.length; i++) boxes[i].setAttribute('class', boxes[i].getAttribute('class') + ' sider'); 
     .sider { color: green; } .allsider { color: red; } 
     <div class="wrapp"> <div class="sidebar-left"></div> <div class="content"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> <!-- <div class="sidebar-right"></div> --> </div>

    • Thanks for the help. I did not expect such a quick response. - Alex Fedorov

    If you use jquery and the element selection speed is not essential for you, you can do this:

     var sidebar = $('div[class^="sidebar-"]'); var boxs = $('.box'); if (sidebar.length == 2) { boxs.addClass('allsider'); } else if (sidebar.length == 1) { boxs.addClass('sider'); }

    Example: https://jsfiddle.net/f5h9cd3g/