すべての前月を現在の月から隠す

Question

私は今月のリストを持っています。今、私が望むのは、前のすべての月を現在の月（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> 

私は

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

を試してみましたが、残念ながら、動作していない、任意のアイデアは、助けてください？

Answer 1

ループを使用する必要はありません。以下試してください：

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

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

がjsperf

Answer 2

new Date().getMonth()は、0〜11の数値を返します。data-valのattrが現在の月よりも小さいかどうかを確認し、親を非表示にしますli。

$(document).ready(function() { 
 

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

 
    $("#months > li > a").each(function() { 
 
    if ($(this).data("val") < month) { 
 
     $(this).parent().hide(); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

Answer 3

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>

ここでは、このように

Answer 4

をそれを行う、あなたのタスクがあります。あなたは二つのことを忘れてしまった - お試し1）MARにマルを変換し、2）李に plunkr

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

Answer 5

を取得するために、上位レベルに移動するこの示すよう.parent()と.prevUntil()を使用して： -

$(document).ready(function(){ 
    var month = new Date().getMonth(); 
    $('.li-month[data-val="'+ month +'"]').parent().prevUntil().hide(); 
}); 

DEMO

Answer 6

お試しください

 $(document).ready(function(){ 
 
      
 
    var d = new Date(); 
 
    var i=0; 
 
    var n = d.getMonth(); 
 

 
    $('.li-month').hide(); 
 
      
 
     for(i =0; i < 13 ; i++){ 
 
      if(i > n || i > n){ 
 
       $('[data-val="'+ (i -1) +'"]').show(); 
 
      } 
 
      else 
 
      { 
 
       $('[data-val="'+ (i -1) +'"]').parent().hide(); 
 
       } 
 
      } 
 
     });

 

 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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> 
 
    

Answer 7

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var myDate = new Date(); 
    var curMonth = myDate.getMonth(); 
    alert(curMonth); 
    $('.li-month:lt('+curMonth+')').parent('li').hide(); 
}); 
</script>