2011-05-02 1 views
4

다른 광산 질문 (this : How to make children auto fit parent's width only with CSS?)에 대한 답을 바탕으로, 저는 성능에 관한 문제를 해결하기 위해 jQuery가 가장 잘 접근하고 있다고 생각합니다.상위 DIV 너비의 자식을 자동 완성하는 더 나은 jQuery 접근법은 무엇입니까?

블록 1 : 필요할 때 모든 DOM 요소를 찾을 수 :

$("div.parent a").css("width", $("div.parent").width()/$("div.parent a").length - 2); 

블록 2 만 DOM 어린이를 찾아 사용하는 각(), 부모() 및 형제 자매() :

$("div.parent a").each(function() { 
    $(this).css("width", $(this).parent().width()/$(this).siblings().length - 2); 
}); 

블록 3 : 첫 번째 DOM의 부모를 찾아, 각 (사용) 및 상황에 따라 아이들을 찾을 :

어떤 블록이 더 낫다, 그래서 http://jsfiddle.net/ErickPetru/6nSEj/3/

: 여기

$("div.parent").each(function() { $("a", this).css("width", $(this).width()/$("a", this).length - 2); }); 

다른 사용자가 테스트하려는 경우 바이올린입니까? 그리고 왜?

내가 Block 1 인해이 하지 루프를 필요로한다는 것을 사실 가장 좋은 것입니다 말할 것

답변

3

내가 요소를 사전에 조회 할 것이다 다음과 같이하십시오 :

// find the elements you want to resize 
var $links = $("div.parent a"); 

// resize them, and use the parent width 
$links.width($links.parent().width()/$links.length - 2); 

이 방법을 사용하면 링크를 찾고 부모를 찾는 것이 한 번만 가능합니다. 루프가없고 중복 쿼리가 없습니다.

http://jsfiddle.net/xixionia/Gsek5/

+0

Nice! 더 간단합니다. 감사합니다. http://jsfiddle.net/6nSEj/11/ –

0

,

당신이 시도 할 수 있습니다 :

$("div.parent a").css({ 
    width: $(this).parent().width()/$(this).siblings().length - 2) 
}); 
+0

"css ({...}) "this"의 범위를 변경하지 않으므로 $ (this)는 로컬 "this"를 둘러싸는 jQuery 객체를 참조하고 개별 링크는 참조하지 않습니다. –

+0

jQuery가 실제로 this의 범위를 변경할 수 있다고 생각합니다. 'css()'와 다른 많은 메소드들에 대해서.하지만 xixonia (http://stackoverflow.com/users/696056/xixonia) 맞습니다. 작동하지 않습니다. –

3

FireBug profiling 사용 :

  • 블록 (1) : 8.466, MS (372) 호출
  • 블록 2 : 여기

    는 예제 10.130 MS, 526 개 통화
  • 블록 (3) : 8.560ms, 383 통화
,210

또한 xixonia의 대답은 가장 빠른

  • xixonia이었다 : 8.205 MS, 속도를 위해 369 전화

:

  1. xixonia의
  2. 블록 1
  3. 블럭 (3)

도 블록 2를 사용하지 않습니다.

+0

프로파일 링 덕분에. –

+0

Sweet! 프로파일 링 덕분에 : D –