hide all previous months start from the current month

Question

I have list of months, now what I want is to hide all previous months start from the current month (march/MAR).

<ul id="months">
    <li><a class="li-month" data-val="0" href="#JAN">JAN</a></li>
    <li><a class="li-month" data-val="1" href="#FEB">FEB</a></li>
    <li><a class="li-month" data-val="2" href="#MAR">MAR</a></li>
    <li><a class="li-month" data-val="3" href="#APR">APR</a></li>
    <li><a class="li-month" data-val="4" href="#MAY">MAY</a></li>
    <li><a class="li-month" data-val="5" href="#JUN">JUN</a></li>
    <li><a class="li-month" data-val="6" href="#JULY">JULY</a></li>
    <li><a class="li-month" data-val="7" href="#AUG">AUG</a></li>
    <li><a class="li-month" data-val="8" href="#SEP">SEP</a></li>
    <li><a class="li-month" data-val="9" href="#OCT">OCT</a></li>
    <li><a class="li-month" data-val="10" href="#NOV">NOV</a></li>
    <li><a class="li-month" data-val="11" href="#DEC">DEC</a></li>
</ul>

I tried

$(document).ready(function(){
    $('.li-month[href="#'+moment().format("MMM")+'"]').prevUntil().hide();
});

but unfortunately, not working, any ideas, help please?

Answer 1

No need to use loops. Try following:

var month = new Date().getMonth();

$('#months').find('[data-val=' + month + ']').parent().prevAll().hide();

Looks a bit faster jsperf

Answer 2

var d = new Date();

n = d.getMonth();
console.log(n)
$('ul li').each(function() {
console.log($(this).find('a').attr('data-val'))
  if ($(this).find('a').attr('data-val') == n) {

    $(this).prevAll().hide();

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul id="months">
  <li><a class="li-month" data-val="0" href="#JAN">JAN</a>
  </li>
  <li><a class="li-month" data-val="1" href="#FEB">FEB</a>
  </li>
  <li><a class="li-month" data-val="2" href="#MAR">MAR</a>
  </li>
  <li><a class="li-month" data-val="3" href="#APR">APR</a>
  </li>
  <li><a class="li-month" data-val="4" href="#MAY">MAY</a>
  </li>
  <li><a class="li-month" data-val="5" href="#JUN">JUN</a>
  </li>
  <li><a class="li-month" data-val="6" href="#JULY">JULY</a>
  </li>
  <li><a class="li-month" data-val="7" href="#AUG">AUG</a>
  </li>
  <li><a class="li-month" data-val="8" href="#SEP">SEP</a>
  </li>
  <li><a class="li-month" data-val="9" href="#OCT">OCT</a>
  </li>
  <li><a class="li-month" data-val="10" href="#NOV">NOV</a>
  </li>
  <li><a class="li-month" data-val="11" href="#DEC">DEC</a>
  </li>
</ul>

DO it this way

Answer 3

Here is your task. You forgot two things - 1) convert Mar to MAR and 2)go to upper level to get li plunkr

$(document).ready(function(){
    $('.li-month[href="#'+moment().format("MMM").toUpperCase()+'"]').parent().prevUntil().hide();
});