從項目列表中只選擇（顯示：塊）元素jquery

我在做一個菜單，我需要從Jquery返回的元素列表中選擇一個特定的元素。從項目列表中只選擇（顯示：塊）元素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

來源

2016-04-29 Atul Sharma

'$（'[type = subMenu]：visible'）'只會返回可見元素https://api.jquery.com/visible-selector/ – billyonecan

謝謝！你解決了它。 –

請務必閱讀@billyonecan頁面上的其他註釋，以獲取有關使用該方法的性能因素的一些信息。 – Shaggy

其他人已經指出的JQuery :visible選擇。然而，它存在一些性能問題，如JQuery API documentation指出：

其他注意事項：

因爲: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那麼你可以從省略屬性選擇器。

來源

2016-04-29 08:51:43 Shaggy

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

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

來源

2016-04-29 07:06:51 RRK

試試這個：

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

它會給所有可見的元素

來源

2016-04-29 07:08:50

從項目列表中只選擇（顯示：塊）元素jquery

回答

相關問題