TriSTaR TriSTaR - 3 months ago 9
CSS Question

Add class and attribute with js

Sorry for my english..

I understand that it was done with addClass and removeClass but how to write terms do not understand
I need to do so if the screen resolution is less than 768 pixels then add the attributes

id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
and the class
"dropdown-menu"
to the
ul
with class
small
and remove class from
li
parent
class and remove the ul with class
nav-child


UPD

I have this:

<li class="item-104 deeper parent">
<span class="nav-header ">About</span>
<ul class="nav-child unstyled small">
<li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
</ul>
</li>


i want do this, when window screen less than 768px:

<li class="item-104 deeper">
<span class="nav-header " id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</span>
<ul class="dropdown-menu unstyled small">
<li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
</ul>
</li>


I want to remove the classes nav-child and parent and add to span attributes

can someone come in handy:

$(function () {
var window_width = 750; // or $(window).width();

if ($(window).width() < 768) {
$('.small').addClass('dropdown-menu');
$('.deeper').removeClass('parent');
$('.small').removeClass('nav-child');
$('.deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
} else {
$('.small').removeClass('dropdown-menu');
$('.deeper').addClass('parent');
$('.small').addClass('nav-child');
$('.deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
}
});

Answer

For adding attributes and classes you could use:

$('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
$('ul.small').addClass('dropdown-menu');

Removing is simpler, because then you set the attribute to an empty string:

$('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});

Current size of your windows can be get with:

$( window ).width()

Or do you want this attributes to be given on resize events? Then just try:

$( window ).resize(function() {
  if ($( window ).width() < 768){
    $('ul.small').addClass('firstClass').addClass('secondClass');
    $('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
  } else {
   $('ul.small').removeClass('firstClass').removeClass('secondClass');
    $('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});
  }
}

After author has edited his question:

var window_width = 750; // or $(window).width();

if ($(window).width() < 768) {
  $('#deeper').removeClass('parent');
  $('#deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
} else {
  $('#deeper').addClass('parent');
  $('#deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-104 deeper parent">
  <span class="nav-header ">About</span>
  <ul class="nav-child unstyled small">
   <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
  </ul>
</li>