ẩn tất cả các tháng trước bắt đầu từ tháng hiện tại

Question

Tôi có danh sách các tháng, bây giờ những gì tôi muốn là ẩn tất cả các tháng trước bắt đầu từ tháng hiện tại (tháng 3/tháng 3).

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

tôi đã cố gắng

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

nhưng không may, không làm việc, bất kỳ ý tưởng, giúp đỡ xin vui lòng?

Answer 1

Không cần sử dụng vòng lặp. Hãy thử sau:

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

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

Trông một chút nhanh hơn jsperf

Answer 2

new Date().getMonth() trả về số từ 0 đến 11. Kiểm tra xem số data-val attr có nhỏ hơn tháng hiện tại và ẩn phụ huynh 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>

DO nó theo cách này

Answer 4

Đây là nhiệm vụ của bạn. Bạn quên hai điều - 1) chuyển đổi tháng ba-Tháng Ba và 2) đi đến cấp trên để có được li plunkr

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

Answer 5

Hãy thử này sử dụng .parent() và .prevUntil() như: -

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

DEMO

Answer 6

Thử này một

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