How to add special attribute to element if has class 'on' or not using jquery?

Question

I have some dynamical list

And if 'LI' element has class name 'on', add attribute "aria-hidden=false" .

Also if LI element has not class name 'on', add attribute "aria-hidden=true" .

This is my code

<ul class="list">
  <li>1</li>
  <li class="on">1</li>
  <li>1</li>
  <li>1</li>
</ul>

And this is what I want the code in DOM

<ul class="list">
  <li aria-hidden=true>1</li>
  <li class="on" aria-hidden=false>1</li>
  <li aria-hidden=true>1</li>
  <li aria-hidden=true>1</li>
</ul>

How to make it with this code ? Please help

Answer 1

You can use class selector with .filter() to target the desired elements the use .attr() to add the attribure

//Target all LI elements
var li = $('ul.list li'); 

//Filter li without on class
li.filter(':not(.on)').attr('aria-hidden', true)

//Filter li with on class
li.filter('.on').attr('aria-hidden', false);

 //Target all LI elements var li = $('ul.list li'); //Filter li without on class li.filter(':not(.on)').attr('aria-hidden', true) //Filter li with on class li.filter('.on').attr('aria-hidden', false); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li>1</li> <li class="on">1</li> <li>1</li> <li>1</li> </ul> 

Answer 2

You can do it like this

$("ul.list li").each(function(){
  $(this).attr("aria-hidden",!$(this).hasClass("on"));
});

Demo

 $("ul.list li").each(function(){ $(this).attr("aria-hidden",!$(this).hasClass("on")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li>1</li> <li class="on">1</li> <li>1</li> <li>1</li> </ul> 

Answer 3

 $('li').attr('aria-hidden', true); $('li.on').attr('aria-hidden', false); //To check if things really changed. Revove it. console.log($('ul.list').html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li>1</li> <li class="on">1</li> <li>1</li> <li>1</li> </ul> 

Answer 4

this code add aria-hidden=false to item that has class 'on'

 $(document).ready(function(){ $('ul.list li.on').attr('aria-hidden', true) $('ul.list li').attr('aria-hidden', false); }) 

 ul.list li.on { background:green } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li >item 1</li> <li class="on" >item 2</li> <li >item 3</li> <li >item 4</li> </ul> 

Answer 5

NOTE: aria-hidden="false" is not recommended, please read this aria - states_and_properties

Try this

 $(".list li").not('.on').attr('aria-hidden', true) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li>1</li> <li class="on">1</li> <li>1</li> <li>1</li> </ul> 

Answer 6

Use .attr() with callback function to do this work. In callback check that element has class on or not.

 $(".list li").attr("aria-hidden", function(){ return $(this).is(".on") ? false : true; }); 

 [aria-hidden=true] {opacity: 0.5} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li>1</li> <li class="on">1 (.on)</li> <li>1</li> <li>1</li> </ul>