從項目列表中僅選擇（display：block）元素

Question

我正在做一個菜單，我需要從Jquery返回的元素列表中選擇一個特定的元素。

當我在控制台上運行時：

 $("[type='subMenu']")

這將返回4個匹配的子菜單元素。

<div type="subMenu" style="display:block">
<div type="subMenu" style="display:none">
<div type="subMenu" style="display:none">

現在，我只需要選擇具有display:block的元素

我試過了

$("[type='subMenu']").css('display') == 'block'

但這給出false作為輸出。

和

$("[type='subMenu']").css('display')

這是給作為輸出none

Answer 1

其他人已經指出了JQuery :visible選擇器。 但是，正如JQuery API文檔中指出的那樣，它存在一些性能問題：

補充筆記：

• 因為:visible是jQuery擴展而不是CSS規范的一部分，所以使用:visible查詢無法利用本機DOM querySelectorAll()方法提供的性能提升。 為了在使用:visible選擇元素時達到最佳性能，請首先使用純CSS選擇器選擇元素，然后使用.filter(":visible") 。
• 大量使用此選擇器可能會對性能產生影響，因為它可能會迫使瀏覽器在確定可見性之前重新渲染頁面。 通過其他方法（例如，使用類）跟蹤元素的可見性可以提供更好的性能。

如果您希望避免這些問題，則可以使用本機CSS選擇器。 在普通的JavaScript中，這將為您解決問題：

document.querySelector("[type=subMenu][style*=display\\:block]");

或者，如果您需要一次選擇多個元素：

document.querySelectorAll("[type=subMenu][style*=display\\:block]");

我相信兩者在JQuery中的等效項（我不使用它）將是：

$("[type=subMenu][style*=display\\:block]");

如果將永遠不會直列設置這些標簽的唯一風格是display ，那么你可以省略*從style屬性選擇。

Answer 2

嘗試這個：

console.log($("[type='subMenu']:visible")). 

它將給出所有可見的元素

Answer 3

您可以使用過濾器或偽類。

$("[type='subMenu']").filter(function(){
    this.style.display == 'block';
});