2014-11-07 4 views
0

특정 속성이 있고 숨겨진 특정 유형의 하위 요소가있는 모든 요소를 ​​가져오고 싶습니다. 이렇게하려면 다음과 같이이 선택기를 썼습니다.jQuery : 숨겨진 하위 요소가있는 elments를 라이브 호버 기능 추가

$("*[custom-attr]:has('span:hidden')") 

이 외에도 나는 호버에 라이브 기능을 추가하려고했습니다. 예를 들면 다음과 같습니다.

$("*[custom-attr]:has('span:hidden')").live("hover", function() { /* do something */ }); 

내가 원하는 시각적 결과를 얻은 이후로 이것이 올바르게 작동한다고 생각했습니다. 그러나 Firebug를 사용할 때, 아마도 완벽하지 않은 것으로 나타났습니다. 몸체 내에서 마우스를 움직이면, 선택을 충족시키는 요소를 가리 키지 않아도 Firebug는 호버 된 HTML 요소가 영향을 받음을 나타냅니다 (Firebug HTML 탭에서 노란색으로 표시됨).

왜이와 내가 그것을 어떻게

Firebug screenshot

을 피할 수있다 : 첨부 이미지보기?

$("*[custom-attr]:not(:has('span'))").live("hover", function() { /* do something */ }); 

감사 :

나는 비슷한 선택은 스팬 아이없이 요소를 얻기 위해이 같은, 같은 문제가 발생하지 않은 것으로 나타났습니다.

+1

시도하지 마십시오()'.live()'의 deprecated..instead 사용'CSTE 연구진를 사용하여이' –

+1

당신은 [Firediff] (HTTPS를 설치할 수 있습니다 : // addons.mozilla.org/en-US/firefox/addon/firediff/) 문서에서 실제로 변경된 내용을 확인하십시오. – skobaljic

+0

@skobaljic 감사합니다. 훌륭한 부가 기능. 이것을 사용하여 내가 추가 한 즉시 id 값 ("sizcache")을 삭제 한 요소에 추가했습니다. 나는 sizcache에 대해 조금 읽었지 만, 위에서 설명한 첫 번째 예제에서는 왜 이것이 사용되고 두 번째 예제에서는 사용되지 않았는지 이해하지 못합니다. – Gustav

답변

0

자연스러운 브라우저 선택기를 사용하여 jQuery가 임시 속성을 추가하지 않도록하십시오. 귀하의 경우를 들어, 대신 has()의 다음을 사용할 수 있습니다

$("[custom-attr]").on("mouseenter", function() { 
    if ($(this).find('span:hidden').length) { 
     /* your code */ 
    }; 
}); 
0

기대하는 시각적 결과를 얻으므로 효과가있는 것처럼 들립니다. Firebug는 최근에 뭔가가 변경된 요소를 강조 표시하거나, 스크린 샷과 같은 HTML보기에서 축소 된 요소를 자녀의 어딘가에 강조 표시합니다. 이 강조 표시는 예를 들어 속성은 변경되며 변경이 예를 들어 마우스를 놓으면 변경 사항이 발생한 후 얼마 동안 강조 표시가 유지됩니다.

Kartikeya가 언급 한대로 .live()에서 .on()으로 전환하는 것이 좋습니다.