隐藏和替换html内容和数据属性值

Question

我正在使用无序列表，该列表是动态输出的，并且已经填充了“数据值”的数据属性。 我无法控制后端的输出。 我需要隐藏一些列表元素并更改其中一个的数据属性。 因此，作为示例，我具有以下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

如建议的那样，您可以链接前两行并将其包装为两行：

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