2011-12-06 4 views
2

에 올 알고 난 HTML 코드의 다음과 같은 부분이 있습니다가 어떻게 내 선택이 jQuery를

<div class="myclass" id ="class1"> 
    <ol class="list"> 
    <li id="li_1"> 
     <input id="input_1" …> 
     <acronym id="input_1" class="classabc"> 
     </li> 
     <li id="li_2"> 
      <input id="input_2" …> 
      <acronym id="input_2" class="classabc"> 
     </li> 
     .... 
     <li id="li_n"> 
      <input id="input_n" …> 
      <acronym id="input_n" class="classabc"> 
     </li> 
    </ol> 
</div> 

지금 내가 약자 태그의 ID를 가지고, 일부 약어 태그의 클래스를 변경하려면를, 그래서 나는이 시도 : 그것은 그렇게 작동하지 않았다

$('acronym#'+id).removeClass('classabc'); 
$('acronym#'+id).addClass('newclass'); 

을 나는 시도 :

$('div.myclass ol acronym#'+id).removeClass('classabc'); 
$('div.myclass ol acronym#'+id).addClass('newclass'); 

하지만 여전히 작동하지 않습니다. 코드 내부에서 경고를 시도했지만 경고가 작동합니다. 제 선택기가 옳지 않다고 생각합니다. 그래서 올바른 선택기를 얻으려면 어쨌든 묻고 있습니까? 또는 셀렉터가 정확한지 어떻게 알 수 있습니까?

+0

''Acronym # _ '+ id'를 원하지 않습니까? – kojiro

+1

'id'의 값은 무엇이며 DOM이 준비되었을 때 실행되는 코드입니까? – RightSaidFred

+2

FYI, ID는 고유하므로 ID 태그 앞에 태그 이름을 포함 할 필요가 없습니다. 그것은 단지 추가 (불필요한) 수표를 추가합니다. – Wiseguy

답변

2

여기에서 중요한 문제 : id 속성은 문서에 고유해야합니다. 동일한 id 속성을 여러 번 사용했는데 결과적으로 id selector를 사용하여 결과가 예측할 수 없게됩니다!

+0

적어도 IE에서는 확인되었습니다. jQuery는 DOM 규칙 적용의 수단이 아니라 도우미라는 것을 기억하십시오. – villecoder

2

당신이 (당신이 중복 ID를 가지고 있기 때문에) 다음과 비슷한 모습이 될 것입니다 찾고있을 거라고 기본 선택 :

$("acronym[id='input_" + n + "']") 
:

$('acronym[id='input_n']) 

그래서 당신이 닫는 따옴표를 포함해야 것

참고 : 중복 ID가 있으므로이 대답은 더 일반적인 $('#input_n') 선택자를 사용하지 않습니다.

+0

그건 옳지 않습니다. 선택기가'' – RightSaidFred

+0

@ RightSaidFred를 찾고있을 것입니다. 너무 빨리 입력하고 편집을 완료하기 전에 제출했습니다. – JW8

+0

Answer가 원본에서 편집되었지만'# 'id selector 대신'id' filter를 사용해야하는 이유는 무엇입니까? – RightSaidFred

5

두 요소에 대해 동일한 id을 선언하는 것은 적절하지 않습니다.

idacronym에서 제거한 후 다음 javascript를 사용하십시오. var id = "input_1";

$('#'+ id).siblings('acronym').removeClass('classabc'); 
다음

The Fiddle

는 CSS 선택기 학습에 W3Schools의 링크입니다

<input id="input_1"> 
<acronym class="classabc"> 

. http://www.w3schools.com/cssref/css_selectors.asp

+0

그러나'acronym' 부분은 불필요한 반면 무효가 아니므로 코드의 결과는 코드의 결과를 변경하지 않습니다. – RightSaidFred

+0

편집 된 JS에서'acronym'에 대한 참조를 추가했습니다. –

+0

나는 OP에서 중복 된 ID를 발견하지 못했다. ''# '+ id''가 무엇을 할 지 말하기 어렵다. 아마 처음 발견 한 것만 잡을 것이지만 잘못된 마크 업으로는 결코 확신 할 수 없습니다. – RightSaidFred

1

이상적으로 페이지의 ID는 모든 DOM 요소에 대해 고유해야합니다. id로 요소를 찾으려면 id selector를 사용할 수 있습니다. 이것을 시도하십시오

$('#'+id).removeClass('classabc'); 
$('#'+id).addClass('newclass');