Masquage et remplacement du contenu html et des valeurs d'attributs de données

Question

Je travaille avec une liste non ordonnée qui est éditée dynamiquement et qui est déjà remplie d'un attribut de données de type "valeur de données". Je n'ai aucun contrôle sur ce qui est édité dans le backend. Je dois masquer certains éléments de la liste et modifier l'attribut de données de l'un d'entre eux. Ainsi, à titre d'exemple, j'ai le code html suivant (pas les données réelles !):

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

J'ai alors le jquery suivant :

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');
}

Ce code dit et fait ce que je veux, mais il semble vraiment désordonné et fastidieux. Existe-t-il un meilleur moyen ?

Answer 1

Comme suggéré, vous pouvez enchaîner les deux premières lignes et l'envelopper dans 2 lignes :

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