Как добавить специальный атрибут к элементу, если есть класс '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

Используйте .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>

Answer 2

ПРИМЕЧАНИЕ: 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 3

этот код добавляет 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 4

$('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 5

Вы можете сделать это так

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

Вы можете использовать селектор класса с .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>