如何將沒有特定類的元素設置爲使用JQuery隱藏？

我有一個頁面上有幾個div，所有的類都是「文章」。我用如何將沒有特定類的元素設置爲使用JQuery隱藏？

$(".article:first").addClass("current");

將class「current」添加到類「article」的第一個div中。我希望所有其他class =「article」div都被隱藏，直到點擊一個按鈕。

當頁面加載時，第一個class =「article」div應該是可見的。點擊一個按鈕時，應出現第二個div，依此類推。

編輯：是否有關class =「article」divs出現在兩個不同分類的div？

<div class="roots"> 
    <div class="article"> 
    </div> 
</div> 
<div class="words"> 
    <div class="article"> 
    </div> 
</div>

我需要在JQuery中以不同的方式解決它們嗎？

來源

2011-09-14 mishmomo

您可以設置只有第一個與這個jQuery顯示的初始狀態：

$(document).ready(function() { 
    $(".article").hide(); // hide them all 
    $(".article:first").show().addClass("current"); // show first one and add class 
});

雖然，我不會親自使用JS的初始狀態爲自己，因爲他們元素可以在JS面前簡要介紹運行，它可能看起來不那麼幹淨。這可能是最好有.article被默認使用CSS隱藏：

.article {display: none;}

而且，然後運行這個最初的JavaScript來顯示的第一個，並添加當前類：

$(document).ready(function() { 
    $(".article:first").show().addClass("current"); // show first one and add class+ 
});

然後，當按下一個按鈕，就表明是隱藏的，你可以執行該下一個：

$("#showButton").click(function() { 
    $(".article:hidden:first").show(); 
});

你可以看到這樣一個在這裏工作的例子：http://jsfiddle.net/jfriend00/RPPYz/。

來源

2011-09-14 22:53:19 jfriend00

我是否需要在使第一個可見之前將它們全部隱藏起來？這是必需的嗎？此外，爲了顯示後續的div，我會使用$（「。article：next」）還是其他類似的東西？ – mishmomo

如果它們全部是最初可見的，那麼您需要隱藏所有不想看到的部分，隱藏所有部分最簡單快捷，然後顯示一個。請參閱我最近添加到我的答案中，我認爲這是使用CSS和JS的組合更好的方法。 – jfriend00

好啊。我喜歡你在點擊功能中所做的。 – Loktar

$(".article").not(":first").hide()

或

$(".article").not(".current").hide()

來源

2011-09-14 22:53:20

要隱藏所有，但第一次發帖，試試這個：

$(".article").not(":first").hide();

要隱藏的所有帖子沒有類電流，使用此：

$(".article").not(".current").hide();

爲了通過一個顯示每個物品一個一個按鈕被點擊時，使用該選擇器：

$(".article.current:hidden").first().show();

更多關於:hidden選擇器可以發現here。

來源

2011-09-14 22:54:42 Bojangles

如何將沒有特定類的元素設置爲使用JQuery隱藏？

回答

相關問題