如果有類'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>