2012-08-23 48 views
2

我有500個<p>元素,每一個與他們的CSS約500 <span>元素設置不透明度1創建無特殊兒童對父母的

如果我$('p').css('opacity', .5),一切都在瞬間更新。

如果我$('p span').css('opacity', .5),它需要幾秒鐘來更新。明顯。它遍歷每個元素。

我的問題是:給定任意一組不同<p>元素<span>元素,還有什麼能讓一切,但那些跨度改變不透明度.5的好辦法?我試過not$('p').not($('p span').slice(5, 600)).css('opacity', .5)不起作用 - 可能是因爲我正在執行集合代數以將孩子從父母中移除。我希望這會隱含起作用。唉。

有沒有解決這類問題的好方法? Here's a fiddle

$('p span').not($('p span').slice(5, 600)).css('opacity', .5)作品...但它是緩慢的: -/

+0

只是爲了確保,你是包裝在引號的選擇權? ...不像你發佈的代碼... –

+0

@ComputerArts是的,更新,thx。 – jedierikb

+1

250000 div O_o – zerkms

回答

0

可以直接調用jQuery方法之後slice

http://jsfiddle.net/CNU62/10/

$('p span').slice(5, 600).css('opacity', .75); 

編輯:

如果你不不介意分兩步走:

http://jsfiddle.net/CNU62/13/

$('p span').slice(10, 20).addClass('filterOut'); 
$('span').not('.filterOut').css('opacity', .75); 

基本上添加特殊類你切那些跨度,你not拿出span s的類,然後做css()

+0

我想要除了那些跨越切片的跨度之外的所有東西來改變它們的不透明度。 – jedierikb

+0

@jedierikb編輯我的答案,請檢查 –

+0

如果將ps的數量和跨度增加到500,chrome將獲取Uncaught RangeError:超出最大調用堆棧大小。迭代了很多跨... – jedierikb

0

我不能保證這將有這麼好執行很多元素,你可以,你可以這樣做:

$("p > *").not("span").css("opacity", 0.5); 

這將讓所有兒童<p>標籤的對象,然後刪除在應用不透明度之前從該集合中獲取元素。因此只有<span>元素在<p>標籤內不會受到影響。如果你需要它的表現不錯,那麼直接走樹可能會比這更快。有些地方直接的JS代碼可以比你在選擇器操作中做得更快。

0

這是我的嘗試...還是很慢。

http://jsfiddle.net/V62wp/5/

var specialSpans = $('p span').slice(5, 105); 
$('p').not(specialSpans.parent()).css('opacity', .5); 
specialSpans.siblings().not(specialSpans).css('opacity', .5); 

這給出了一個輕微的速度增加(見this fiddle):

var specialSpans = $('p span').slice(5, 105); 
var specialParent = specialSpans.parent(); 
$('p').not(specialParent).css('opacity', .5); 
specialParent.children().not(specialSpans).css('opacity', .5);