Ответ 1
Не нужно использовать циклы. Попробуйте следующее:
var month = new Date().getMonth();
$('#months').find('[data-val=' + month + ']').parent().prevAll().hide();
Выглядит немного быстрее jsperf
У меня есть список месяцев, теперь я хочу скрыть все предыдущие месяцы с текущего месяца (марш/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();
});
но, к сожалению, не работает, никаких идей, пожалуйста, помогите?
Не нужно использовать циклы. Попробуйте следующее:
var month = new Date().getMonth();
$('#months').find('[data-val=' + month + ']').parent().prevAll().hide();
Выглядит немного быстрее jsperf
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>
Вот ваша задача. Вы забыли две вещи: 1) конвертировать Mar в MAR и 2) перейти на верхний уровень, чтобы получить li plunkr
$(document).ready(function(){
$('.li-month[href="#'+moment().format("MMM").toUpperCase()+'"]').parent().prevUntil().hide();
});
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>
Попробуйте использовать .parent()
и .prevUntil()
, как показано: -
$(document).ready(function(){
var month = new Date().getMonth();
$('.li-month[data-val="'+ month +'"]').parent().prevUntil().hide();
});
Попробуйте этот
$(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>
<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>