如果有类'on'或不使用jQuery，如何向元素添加特殊属性？

Question

我有一些动态清单

如果'LI'元素的类名称为'on'，则添加属性"aria-hidden=false" 。

同样，如果LI元素的类名称不是'on'，则添加属性"aria-hidden=true" 。

这是我的代码

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

这就是我想要的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>

如何用此代码实现？ 请帮忙

Answer 1

您可以将类选择器与.filter()一起使用，以将所需元素作为目标。使用.attr()来添加属性

//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

你可以这样

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

演示版

 $("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

此代码将aria-hidden = false添加到具有“ 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

注意：不建议使用aria-hidden =“ false”，请阅读此aria-States_and_properties

尝试这个

 $(".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

将.attr()与回调函数一起使用可完成此工作。 在回调检查元素有类on与否。

 $(".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>