복잡한 jquery CSS 선택기를 캐싱을위한 컨텍스트로 바꿈

피드백이 끝나면 질문을 다시 작성하십시오.복잡한 jquery CSS 선택기를 캐싱을위한 컨텍스트로 바꿈

나는까지 다음 표시했다 : 나는에 액세스 할 수 있습니다

<body> 
    <h1>Title</h1> 
    <p>bla</p> 
    <div> 
    ... <!-- a thousand tags --> 
    </div> 

    <div id="do-not-modify-me"> 
    <!-- a hundred tags --> 
    </div> 

</body>

<h1>Title</h1> 
    <p>bla</p> 
    <div> 
    ... <!-- a thousand tags --> 
    </div>

는 사용 :

$('body > *:not(div#do-not-modify-me)');

나는 그래서 나는 모든 콘텐츠를 얻을 수 있습니다 않는다 id가 "do-not-modify-me"인 div를 제외한 본문의

이제 다른 프로그래머가 jquery를 사용하는 select와 마찬가지로 본문에서 아무 것도 선택할 수 있도록하는 함수를 작성한다고 가정 해 보겠습니다. 다른 프로그래머는 div # do-not-modify-me를 수정해서는 안되지만 걱정하지 않아도됩니다.

$('body > *:not(div#do-not-modify-me)')은 많은 시간이 소요되므로 캐시 할 것입니다.

생각은 다음과 같습니다

// TEST CODE 

windows.new_body = $('body > *:not(div#do-not-modify-me)'); 

function select(selector) { 
    return $(selector, windows.new_body); 
}

그래서 다른 프로그래머가 할 수 있어야한다 :

// TEST RESULT CODE 
select("p").css("color", "red");

그것은 빨간색으로 색칠하는 모든 본문에 <p> 있지만 사람 div # do-not-modify-me에 포함되어 있습니다.

현재 TEST CODE가 작동하지 않습니다. 왜냐하면 현재는 결과 자체가 아니라 결과의 하위 항목에 css()를 적용하기 때문입니다.

예컨대 :

select("p").css("color", "red");

동작 해 같은 :

$('body > * p :not(div#do-not-modify-me)').css("color", "red");

원하는 결과가 될 것이다 동안 :

$('body > p :not(div#do-not-modify-me)').css("color", "red");

참고 :

$('body > * :not(div#do-not-modify-me)').parent().css("color", "red");

<p> div # do-not-modify-me가 빨간색으로 변하기 때문에 작동하지 않습니다.

TEST RESULT CODE에서 어떻게 결과를 얻을 수 있습니까? 코드의 일부를 수정할 수 있습니다.

출처

2009-06-10 e-satis

그렇지 않습니다. 나는 약간의 설명을 덧붙였다. 그것이 더 명확 할 것이기를 바란다. 아직 비밀 스럽다면 알려주세요. –

이전 질문을 살펴 보았습니다. 꽤 명확하지 않습니다. 여기에 HTML 마크 업을 넣고 다른 시나리오에서 예제를 설명하십시오. –

나는 내 대답에 최근 코멘트를 남겼다. 나는 당신이 더 이상하고 싶은 것을 얻지 않습니다. 좀 더 이해할 수 없기 때문에 질문을 다시 작성하고 샘플을 포함시켜 주시겠습니까? –

더 이상 관련이 없으므로 이전 EDIT를 모두 제거 했으므로 EDIT 기록에서 읽을 수 있습니다.
EDIT3
기본적으로 문제는 선택기를 캐시 할 수 없다는 것입니다. 이는 $() 함수가 일치하지 않는 객체가 아니라 일치하는 객체를 반환하기 때문입니다. 즉, 캐시 된 선택기를 사용하면 캐시가 실제 DOM과 동기화되지 않을 수 있습니다. 나는.이 간단한 페이지에서 :

<div> 
<p>foo</p><p>bar</p> 
</div> 
<div class='bar'></div>

//reselect the non-editable area everytime 
function select(selector) { 
    return $(selector, $('body').children(':not(div#do-not-modify-me)')); 
} 
//or, check the selection against being in the reselectable area. 
function select(selector){ 
    return $(selector).filter(function(){ 
    return $(this).parents(':not(div#do-not-modify-me)'); 
    }); 
}

당신은 하나가 빠른있는 자신을 시도해야합니다 :

var context = $('body').children(':not(.bar)'); //this holds: <div><p>foo</p><p>bar</p></div> 
$('div', context).append('<p class="x">HAI</p>'); 
//context still is <div><p>foo</p><p>bar</p></div> even though it should be 
//<div><p>foo</p><p>bar</p><p class="x">HAI</p></div>

그래서 당신은 bassicly 여기에 두 가지 옵션이 있습니다, 선택 매번 다시 실행해야합니다. # do-not-modify-me div를 검색하지 않는 다른 방법은 없다고 생각합니다.

이 더욱 쉽게하기 위해 할 수있는 (그리고 빨리 내 생각이) 사업부에서 편집 가능한 영역을 감싸 인 다른

뭔가 그런 다음

<body> 
<div id='modify-me'> 
    <h1>Title</h1> 
    <!-- thousands of tags --> 
</div> 
<div id='do-not-modify-me'> 
    <!--hundreds of tags --> 
</div> 
</body>

방금 할 수

function select(selector) { 
    return $(selector, $('#modify-me')); 
}

출처

2009-06-10 17:59:48

아이들을 원하지 않으면, 나는 anyparameter없이 $()와 같이 "context"의 결과에서 선택할 수 있어야합니다. –

어쩌면 당신이 더 좋은 질문을하려고 노력할 것입니까? "$ ("guess "). do()"와 같은 코드에서 정확히 원하는 것을 적어 두십시오. –

마지막 문장은 다음과 같습니다. "선택한 콘텐츠의 모든 하위 항목을 가져옵니다. 당신은 그걸 수정해서 즉시 사용할 수 있겠 어? " "나는 아이들에게 돈을 버는 대신에 $ ('*', 문맥)을 사용하는 대신에 –

I 다음과 같이 '컨텍스트'를 직접 사용할 수 있습니다.

context = $('body > *:not(div#do-not-modify-me)'); 
context.doStuff();

출처

2009-06-10 18:01:32 cloudhead

LOL. 당연히 할 수 있지만, 모든 목적은 그것을 사용할 때마다 다시 계산하는 것을 피하기 위해 캐시하는 것입니다. 마지막 함수가 jquery 객체를 수정하면 "컨텍스트"가 더 이상 기대하지 않게 될 것입니다 ... –

질문을 더 잘 표현했다면 잘 대답 할 수 있었을 것입니다. pff – cloudhead

정확하게 캐시하려고하는 것은 무엇입니까? 그리고 올바른 질문을 할 수 없기 때문에 왜 투표를하지 않을까요? –

확장 설명을 읽은 후 스피 내 샷 :

context = $('body > *:not(div#do-not-modify-me)'); 
$("*:first",context);

는 당신은 할 수 있습니다 :

var len = context.length;

난 당신이 할 수있는 컬렉션에 요소 번호로 액세스하려면 :

context = $('body > *:not(div#do-not-modify-me)'); 
    context.find("*:first");

은 당신이 할 수있는 요소의 수를 얻으려면 사용 :

context.get(i);

api.jquery.com에 대한 유용한 정보가 많으므로 this을 읽고 아마 자신 만의 선택기를 만들어야 할 것입니다.

는

는 편집 : 나는 당신의 최신 업데이트를보고, 후
나는 상황에 맞는 요소 결과를 통해 당신이 찾고있는 것은 내가 의해 몇 시간 여기에 언급 한대로 완료 될 수 있도록, 능력으로 반복에 대한 생각 :

for (var i = 0; i < context.length; ++i) 
    { 
     $(context[i]).method(); 
     // do here you checks, adding, removing. 
    }

이것은 영리한 것처럼 보이지 않지만 작동해야합니다. $ .fn을 확장하고 목적에 맞게 함수를 구현하면 캡슐화 할 수 있습니다. 편집 # 2 :
가의 또 다른 방법 해보자 : 당신이 contex.pick ("P")을 할 수있는이 후

(function($) 
    { 
     $.fn.tagName = function() 
     { 
      return this.get(0).tagName; 
     }; 
     $.fn.pick = function(tag) 
     { 
      return this.filter(function() 
      { 
       return $(this).tagName == tag; 
      }); 
     }; 
    } 

})(jQuery);

를, 그래서 그것은 당신에게 당신의 결과 집합 내부의 모든 단락을 반환하지만이 코드가 불완전하므로 jquery 코드를 좀 더 살펴볼 필요가 있습니다. 예를 들어 pick 함수로 완전한 jquery 기능을 사용할 수있는 방법으로 구현하려면 아마도 xpath DOM parser을 사용해야합니다.

출처

2009-06-10 18:37:00

$ ("* : first", context)는 결과의 하위 항목 중 첫 번째를 제공합니다. 그래서, 아니에요. 시체에서 무언가를 제거하는 것은 생각보다 어렵습니다. –

그래서 $ (context.get (0))을 사용하십시오 ... –

좋아, 제 설명은 처음 시도보다 좋지 않을 수도 있습니다.젠장, 내가 필요로 할 때 내 영어 선생님은 어디 있니? –

코드는 어떤 방식 으로든 수정할 수 있다고 했지요?왜 당신이 무엇이라고 생각하지 않는 것입니까 무엇을 대신 검색 하시겠습니까 검색하고 싶습니다. 나머지 코드는 <div>에 넣고 컨텍스트로 사용하십시오. 그것은 어떤 우아 상도 얻지 않을 것이지만 그것은 간단하고 일을 완성합니다 ^TM.

출처

2009-06-10 22:21:35

복잡한 jquery CSS 선택기를 캐싱을위한 컨텍스트로 바꿈

답변

관련 문제