2016-03-22 14 views
1

Ben bir css kişiyim, bir progammer değilim, bu yüzden jquery benden birazcık öyleyse, bu gerçekten çok basitse özür dilerim ama oraya ulaşamıyorum. Ayda bir li li var. Ay'a dayanan tüm lileri saklamak için bir işlev istiyorum. Yani, tüm lilerin temsil ettikleri ay geçtikten sonra yok olmasını istiyorum, böylece sadece şimdiki ve gelecekteki aylar kalır.Jquery Ayın ilk saatinde li'yi gizle

<script type="text/javascript"> 
$(document).ready(function() { 

var d = new Date(); 
var n = d.getMonth(); 

Ve endeksine n karşılaştırmak - orada ayda bir li ve onlar sırayla konum olarak

görünce, bana oluştu kolay bir yol bir sayı olarak geçerli ayı almak olacaktır li ve küçükse sakla. Bunun gibi bir şey, her bir li için çalışmak için alamıyorum - bunları bir dizi içinde saklamak gerektiğini düşünüyorum?

+3

yazım hatası ya da böcek? '$ ('li) .hide();' (Kapanış teklifi olmalıdır.) – Quotidian

+0

'$ (" li ") her (işlev (idx, öğe) {item.toggle (idx teran

+0

@teran ooh! Bunu beğendim. Çalışmak için jQuery nesnesinde atılacak öğeye ihtiyaç duyar. Bu bağlamda 'item' basit bir düğümdür. https://jsfiddle.net/d87pmr1c/ –

cevap

0

Ben soruyorsun tam olarak ne alamadım ama bu sizin için .... Kendi tecrübelerime

<ul id="moths"> 
<li>Jan</li> 
...... 
</li>Dec</li> 
</li> 

<script> 
function hideCurrentMonth(selector){ 
    $(selector+' li').eq(new Date().getMonth()).prevAll().hide(); 
} 
</script> 
0

, liste öğesi değeri röle daha iyidir aradıklarını umut Listeniz ve dizinlerinizin sırasına göre . Listenizi ürün tarihleri ​​gösterir tam olarak nasıl yayınlamak yoktu, bu yüzden yazdım ve val Bu denetlemeyi başarmak ve tarihi gizleyebilirsiniz nasıl göstermek basit (ve gerçekten zarif değil) örneği:

<body> 
    <ul id="monthsList"> 
     <li>03</li> 
    </ul> 
</body> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script> 
var monthsElements = $("#monthsList").children(); 

var currMonth = "03"; // I saw that you already know how to use new Date() to get the current month, im just not sure 
// how you represent your months in the html li's 

for (var i = 0; i < monthsElements.length ; i++) 
{ 
var currMonthLi = monthsElements[i]; 

if ($(currMonthLi).text() == currMonth) 
{ 
    $(currMonthLi).hide(); 
} 

} 
</script> 
+0

Üzgünüz, HTML hakkında açıklamam gerekirdi - li's çok sayıda işaretleme içeriyor, bu yüzden değerlerini kullanamıyorum. Onlara ya da veri dizin değerlerine atayabilirim. –

+0

Pekala, bu yüzden benim çözümüm işe yaramazsa "if" ayarını değiştirmek yerine kendi kimliğini kontrol etmek için –

1

Tamam, yorumlardan cevap. İstenen sonuca ulaşmak için birçok yol var.

$(function(){ 
    var mIdx = new Date().getMonth(); 

    $("ul#months li").each(
      function(idx, item){ 
       $(item).toggle(idx >= mIdx); 
      }); 
} 

Eğer li toplanmasını yineleme ve gerekli öğeleri gizlemek, none için dsiplay ayarlamak için toggle kullanabilir veya benzeri remove() elemanları can ya addClass("hidden") veya toggleClass("hidden", ...) edebilir ..

veya inşa edebilir sayfadaki birşey saklamak gerekiyorsa

$("li:lt(" + mIdx + ')').hide(); 

ama,: gerekli seçici ve hide\remove\toggle elemanları yük, imho, daha iyi sunucu tarafında hiç işlemez.

güncelleme: kod parçacığı göstermekti eklendi:

var mIdx = new Date().getMonth(); 
 
$("ul#months li:lt(" + mIdx + ')').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="months"> 
 
    <li>January</li> 
 
    <li>February</li> 
 
    <li>March</li> 
 
    <li>April</li> 
 
    <li>May</li> 
 
    <li>June</li> 
 
    <li>July</li> 
 
    <li>August</li> 
 
    <li>September</li> 
 
    <li>October</li> 
 
    <li>November</li> 
 
    <li>December</li> 
 
</ul>

+0

düşünün. Bunun basitliği gibi, teşekkürler. Ama bunu denediğimde, tüm lıi indeks değerini kabul eder ve gizler. –

+0

@GuillaumeRoberts Örneğin kod snippet'i ekledim – teran