2012-06-13 5 views
8

이의 내가 어떤선택 요소

<TR style = "background-color : red ;"> 

일부

<TR> 

가 있다고 가정하자 (즉, 공간 콜론 옆과에 주목해야합니다

: 내가 처리하고있는 페이지가

지금) 그런 식으로 작성되어 있기 때문에 세미콜론은이 의도적이다

은 완벽하게 작동합니다. 하지만 here라고 말하면 :

[이름! = "값"] 네이티브 DOM querySelectorAll() 메소드에서 제공하는 성능 향상을 이용할 수 없습니다. . 현대적인 브라우저에서 더 나은 성능을 위해 ("당신의-순수 CSS 선택기") 대신하지 ('[이름 = "값"]')

그래서

궁금 해서요을 $를 사용하여 내 표현 최고 하나 또는 이와 유사한 것 :

$('.detailtable tr').not('[style~="darkgray"]') // this doesn't work! 

더 나은 성능을 제공합니까? 마지막 표현을 작성하는 올바른 방법은 무엇입니까? 흥미롭게도

+0

'$ ('. detailtable tr'). ('[style ~ = "darkgray"]')'는 동일하게 동작해야합니다. 성능이 걱정된다면 http://jsperf.com/을 테스트하십시오. –

+0

$ ('detailtable tr') 주석에 쓰지 않았으므로 ('[style ~ = "darkgray"]')는 작동하지 않습니다 ... – Pierpaolo

답변

20

, 당신과 같이 *= 대신 ~= 사용해야합니다 :

$('.detailtable tr').not('[style*="darkgray"]'); 

가 여기에 fiddle입니다.


그리고 아니요, .not을 사용하는 것이 아마도 빠르지 않을 것입니다.querySelectorAll은 해당 선택기를 그대로 구문 분석 할 수 있어야합니다.

이 부분은 fiddle입니다.


편집 : 당신이 IE8에 관심 있다면 그 다음 당신에게 작은 성능 향상을 줄 것이다 대신 :not 선택의 .not 방법을 사용하여, 많은. 그 이유는 매우 간단합니다. IE8은 속성 선택자를 지원하지만 부정 선택자를 지원하지 않습니다.

+0

예, 유효한 CSS 선택기이기 때문에 'querySelectorAll()'과 함께 작동합니다. 참고 항목 : [jQuery와 CSS 사이의 : not() 선택자의 차이점은 무엇입니까?] (http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between- jquery-and-css) (나는 사람들이 어떻게 퍼포먼스에 신경을 쓰지 말아야하는지에 대한 작은 섹션을 작성하려고했지만, 사람들은 이미 퍼포먼스에 대해 너무 신경을 써서 그것을 읽었을 것이라고 생각했다. 그래서 나는 신경 쓰지 않았다. 쓰기 ...) – BoltClock

+0

@BoltClock - 당연히 네이티브': not '선택자와 jQuery가': not'를 강화한 점이 다릅니다. 그러나이 경우 네이티브 구현이 올바르게 처리 할 것이라고 가정하는 것이 안전합니다. –

+0

@BoltClock - 실적에 대해서는별로 신경 쓰지 않지만 기꺼이 의견을 듣습니다. 공유하는 신경? 작은 소설 책이라 할지라도 나는 그것을 읽었을 것입니다 ... –

0

I'd suggest you take a look at this.

사전에

덕분에, 의사 선택기 (같은 "없습니다")는 실제로 초기 선택 옆에있는 함수를 사용하는 것보다 속도가 느린 경향이있다. 사실 ... 그들은 분명히 "2 배나 느립니다".

내가 인용 :

  1. $("#id p");
  2. $("#id").find("p");

는 당신이 두 번째 방법은 배 빠른 첫 번째로보다 더 될 수 있음을 배울 놀랄까요? 선택기가 다른 사람보다 성능이 뛰어난 을 아는 것은 코드가 올바르게 실행되는지 확인하는 데있어 매우 중요한 빌딩 인 블록이며 사용자가 발생하기를 기다리는 사용자 을 좌절시키지 않습니다.

나는 .not 친구와 함께 갈 것입니다! 당신이 정말로 "가 속성 내에서 문자열을 포함하지 않는 요소를 선택"하려면

+0

분명히? 나에게. – BoltClock

+0

http://jsperf.com/id-vs-class-vs-tag-selectors/2에 따르면 의사 선택기는 모든 선택기 중에서 가장 느립니다. 나중에 jQuery 함수를 연결하는 것보다 빠르다는 증거는 찾지 못했습니다. 그런 다음 다시 말하면, 내가 증거를 찾지 못했다고해서 그것이 존재하지 않는다는 것을 의미하지는 않습니다. :) – cereallarceny

0

W3C Recommendation에서 현재 사용하는 기기는 document.querySelectorAll()라고해도 완벽하게 정상적으로 작동합니다.

아마 예상대로 작동하는지 테스트 할 수 있습니다.

+0

': not()'가 초안에 추가되었고 jQuery가 곧 그걸 가져 왔습니다. – BoltClock

+0

@BoltClock 그러나 [selectors 테이블] (http://www.w3.org/TR/css3-selectors/#selectors) Negation Pseudo Class의 'CSS 레벨에서 처음 정의 된 항목'에서 '3'을 언급합니다. 따라서 나는 이것이 선택자 목록에 최근 추가 된 것이라고 생각했다. 이전에 jQuery에서 선택했는지 확인하기위한 참조를 제공하십시오. 편집하기 전에 응답을 기다리고 있습니다. – Sujay

+0

CSS3는 최근에야 권장 사항으로 발표되었지만 10 년 넘게 초안을 작성했으며': not()'와 마찬가지로 오래되었습니다 (사양 페이지로 이동하여 "이전 버전"을 계속 클릭하십시오). jQuery는 첫 번째 주요 안정 릴리스에서': not()'와 함께 제공됩니다. [docs] (http://api.jquery.com/not-selector)의 "version added : 1.0"이 나와 있습니다. – BoltClock