HTMLコンテンツとデータ属性値の両方を非表示にして置き換えます

Question

動的に出力され、データ属性 'data-value'で既に設定されている順序のないリストを使用しています。私はバックエンドで何が出力されているのかを制御していません。私はリスト要素のいくつかを隠し、それらのデータ属性を変更する必要があります。だから、例として、私は次のHTML持っている（実際のデータではないが！）：

<ul class="dropdown-menu"> 
    <li data-value="1996"><a href="javascript:;">1996</a></li> 
    <li data-value="1997"><a href="javascript:;">1997</a></li> 
    <li data-value="1998"><a href="javascript:;">1998</a></li> 
    <li data-value="1999"><a href="javascript:;">1999</a></li> 
    <li data-value=""><a href="javascript:;">2000</a></li> 
<ul> 

私は、次のjQuery持っている：このコードワード

window.onload = function(){ 
    $('.dropdown-menu li[data-value="1996"]').html('YYYY'); 
    $('.dropdown-menu li[data-value="1996"]').attr('data-value', 'YYYY'); 
    $('.dropdown-menu li[data-value=""]').addClass('hideMe'); 
} 

をし、私が何をしたいんしかしそれは本当に乱雑で、長い間巻き込まれているようだ。より良い方法がありますか？示唆したように

Answer 1

、あなたは最初の2行を連鎖することができますし、2行でラップ：

$(document).ready(function(){ 
 
    $('.dropdown-menu li[data-value="1996"]').html('YYYY').attr('data-value', 'YYYY'); 
 
    $('.dropdown-menu li[data-value=""]').addClass('hideMe'); 
 
}); 
 

.hideMe{ 
 
    display:none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-menu"> 
 
    <li data-value="1996"><a href="javascript:;">1996</a></li> 
 
    <li data-value="1997"><a href="javascript:;">1997</a></li> 
 
    <li data-value="1998"><a href="javascript:;">1998</a></li> 
 
    <li data-value="1999"><a href="javascript:;">1999</a></li> 
 
    <li data-value=""><a href="javascript:;">2000</a></li> 
 
<ul>