jquery each：只有具有z索引的循環

繼續在這個post上，我會進一步挑戰一下 - 如何循環只有z索引的div元素？jquery each：只有具有z索引的循環

的CSS，

#layer-1 { z-index:1; position:absolute; } 
#layer-2 { z-index:2; position:absolute; } 
#layer-3 { z-index:3; position:absolute; }

HTML，

<div id="layer-1">layer-1</div> 
<div id="layer-2">layer-2</div> 
<div id="layer-3">layer-3</div> 
<div id="layer-4">layer-4</div>

jquery的，

var index_highest = 0; 

// more effective to have a class for the div you want to search and 
// pass that to your selector 
$("div").each(function() { 

    // always use a radix when using parseInt 
    var index_current = parseInt($(this).css("zIndex"), 10); 
    alert(index_current); 

    if(index_current > index_highest) { 
     index_highest = index_current; 
    } 
});

jQuery的代碼在這裏是循環的每個div元素。它會而不是是一個很好的解決方案，當我有我的根文檔噸的大量的div。所以我認爲，理想情況下代碼可以循環只有z-index的div元素，然後忽略其餘的div。

可能嗎？

謝謝。

來源

2011-04-17 laukok

需要通過只有z-index的div元素循環，如果你能告訴我們可以建議更好的解決方案 – kobe 2011-04-17 01:39:24

如果你正在做相反的事，你應該在生成html的時候這樣做，你應該知道頭哪些元素有高z指數。 – kobe 2011-04-17 01:44:49

@kobe：謝謝。它是爲我彈出的div。當我彈出一個新的div時，我可能已經存在另一個彈出div。所以我需要新的彈出窗口div在每次較舊的彈出窗口div上面。這就是爲什麼我需要找到最高的彈出窗口z-index，以便我可以將+1添加到新的彈出窗格的z-index。但我不會循環所有的div，因爲它需要很長時間才能完成循環。希望這是有道理的。謝謝。 – laukok 2011-04-17 01:47:17

我的想法是，你需要遍歷所有的DIV，並測試CSS z-index值，這是沒有用的。沒有一種更適合的方式嚴格按照該標準將它們作爲子集進行選擇;另外，如果您在頁面上有任何其他具有z-index的DIV，它也會選擇這些DIV（如果您可以這樣做）。可能不是一個好的方式去。

您應該一羣他們，如果他們是一起的：

<div id="layers"> 
<div id="layer-1">layer-1</div> 
<div id="layer-2">layer-2</div> 
<div id="layer-3">layer-3</div> 
<div id="layer-4">layer-4</div> 
</div> 

$("#layers").each(function() { 
    // stuff happens 
});

或者添加類的z索引的DIV：

<div id="layer-1" class="layer">layer-1</div> 
<div id="layer-2" class="layer">layer-2</div> 
<div id="layer-3" class="layer">layer-3</div> 
<div id="layer-4" class="layer">layer-4</div> 

$(".layers").each(function() { 
    // stuff happens 
});

你也可以，如果你的ID命名規則是用^ selector如您所暗示：

<div id="layer-1">layer-1</div> 
<div id="layer-2">layer-2</div> 
<div id="layer-3">layer-3</div> 
<div id="layer-4">layer-4</div> 

$("div[id^=layer-]").each(function() { 
    // stuff happens 
});

http://jsfiddle.net/MFqNm/

來源

2011-04-17 01:40:12

我剛剛輸入相同的答案！ - 就我所知，沒有辦法將z-index作爲jQuery選擇器的一部分加以澄清。您需要執行類似@Jared在此答案中指出的內容。 – Goyuix 2011-04-17 01:41:48

謝謝你，Jared。 – laukok 2011-04-17 01:50:58

@lauthiamkok - 沒問題。 :) – 2011-04-17 01:51:49

不管怎樣，你的Javascript將不得不循環遍歷所有的div（儘管Jared說關於在一個容器下分組所有適用的div是一個很好的觀點），看看哪些設置了z-index set（since在我知道的任何瀏覽器中沒有原生的CSS屬性選擇器）。所以，我認爲在所有沒有z-index（if (!$(this).css('z-index')) continue;）的迭代中，通過循環遍歷所有div s和continue;，你不會獲得太多的性能提升。

如果您真的擔心，可以嘗試確定哪些元素在服務器級別具有z-index，並以編程方式添加類。然後你可以使用jQuery來選擇該類的元素。

來源

2011-04-17 01:42:21

jquery each：只有具有z索引的循環

回答

相關問題