add value of attribute with specific condition on list items

Question

i have this code.

<ul>
<li><span id='' key="num">30</span></li>
<li><span id='' key="0">40</span></li>
<li><span id='' key="num">20</span></li>
</ul>

how do i add (id="disable") to only that span of list item which have attribute (key="0")

i am using this code .

$(function(){
  $('li').each(function(){
    if( $(this).find('span').attr('key') == '0' ) $(this).attr('span:id','disable')
  });
})

Answer 1

使用属性选择器 ：

$('li span[key="0"]').attr('id', 'disable');

Answer 2

You can use $(this).find('span').attr('id','disable')

 $(function(){ $('li').each(function(){ if( $(this).find('span').attr('key') == '0' ) $(this).find('span').attr('id','disable') }); }) 

 #disable{ background : red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><span id='' key="num">30</span></li> <li><span id='' key="0">40</span></li> <li><span id='' key="num">20</span></li> </ul> 

But instead of using .each to loop you can just use $('li > span[key=0]').attr('id','disable');

 $(function(){ $('li > span[key=0]').attr('id','disable'); }) 

 #disable{ background : red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><span id='' key="num">30</span></li> <li><span id='' key="0">40</span></li> <li><span id='' key="num">20</span></li> </ul> 

Note: Don't duplicate Id .. if you intend to use the code for more than one element use class instead