隱藏和替換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>