2011-01-03 6 views
3

링크가 포함 된 테이블의 동적 HTML 구조가 매우 간단하고 링크가있는 두 번째 테이블이 포함될 가능성이 있습니다. 주 테이블의 링크에 대한 html 속성은 변경하고 두 번째에는 변경하지 않으십시오.jQuery Selector

내 구조 :

그래서 예를 들어, 내가 좋아하는 것

<table> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr> 
    <td> 
     <table> 
      <tr><td><a href="http://stackoverflow.com">link</a></td></tr> 
      <tr><td><a href="http://stackoverflow.com">link</a></td></tr> 
      <tr><td><a href="http://stackoverflow.com">link</a></td></tr> 
     </table> 
    </td> 
</tr> 
은 "www.google.com"모든하는 HREF를 변경하기를 "www.foo.com". href 속성을 변경할 수 있지만 셀렉터 b/c와 관련하여 두 번째 테이블이 존재하지 않는 시간이 있습니다. 나는 그것을 할 수있는 가장 effecient 방법이 아니다 확신 $('table a').filter(':not(table:last a)')

,하지만 두 번째 테이블의 가능성이 놀이에 와서까지이 작업을했다 : 같은

나의 현재 선택 보인다. 당신의 "주"테이블이 다른 테이블에 있지 않으면

+2

첫 번째 테이블에 어떻게 액세스합니까? 사용할 수있는 ID 또는 절대 참조가 있습니까? 그래서 셀렉터에서'> '를 사용하여 트리를 예상보다 많이 가로 지르는 것을 방지하는 것이 쉬워야합니다. –

답변

5

, 당신이 할 수 있습니다 : 동등

$('table a:not(table table a)') 

또는 :

$('table a').not('table table a') 

업데이트 : 성능 현명한, Patrick's answer 훨씬 낫다.

+1

큰 답변을 주셔서 감사합니다. 이걸 받아 들일거야. 그것은 작동하고 나는 누가 당신이나 mririgo 아래에 먼저 대답 말할 수 없습니다. 또한 동적으로 생성되기 때문에 성능이 결코 문제가되지 않아야합니다. 행 수가 25를 넘지 않습니다. –

0

테이블의 컨테이너로 할 수 있습니다.
이 있다면 몸 :

$ ("body> 테이블> TR> TD>에")

0

이없는 경우 (의 ID를 child selector를 사용하여 기본 테이블을 제공하십시오 이미 하나) :

$('#maintable > tbody > tr > td > a') 

여기에서 #maintable은 주 테이블의 ID입니다.

편집 :<tbody> 태그를 추가하면됩니다 (설명에 표시된 이유로).

이것은 최신 브라우저에서 기본 CSS 선택기를 사용하며 이전 브라우저를 사용하지 않는 한 jQuery 매직이 필요하지 않습니다.

+0

'

'요소는'>'을 사용할 때주의하십시오. ''이 없어도 대부분의 브라우저에서 하나를 삽입하므로 선택기가 실패합니다. – user113716

+0

@patrick dw : 좋은 지적입니다. 이 경우, '

'을 명시 적으로 추가하여 그곳에 있음을 확실히 알 수 있습니다. 그러면 다음과 같이 변경됩니다 :'$ ('# maintable> tbody> tr> td> a ')' –

+0

예, 브라우저 간 일관성을 보장하기 위해 명시 적으로 '

'을 포함하는 것에 전적으로 찬성합니다. – user113716

1

나는 차라리 이렇게 거라고 생각 :

$('table').slice(0, -1).find('a'); 

그런 다음 마지막으로 모든 설정을 줄이고, 마지막으로 <a> 요소에 대한 .find()을, 모든 테이블을 찾을 수 있습니다.

그 이유는 유효한 CSS 선택기를 많이 사용하고 있기 때문에 그 이유는 querySelectorAll이 jQuery에 의해 성공적으로 활용 될 수 있기 때문입니다.

+0

'table : first'은 어떻습니까? –

+0

@Felix : 이유를 설명하는 업데이트 만했습니다. ': first' 셀렉터는 유효하지 않은 CSS 셀렉터의 카테고리에 적합합니다. 테이블이 2 개인 경우 사소한 고려. – user113716

+0

알겠습니다. 그냥 더 멋지다고 생각;)하지만 당신 말이 맞아 ... 설명 주셔서 감사합니다. –

0

당신이 동적으로 생성 된 HTML을 변경할 수 있습니다 경우 당신이 정말로 각 테이블에게 ID 속성을 제공한다 :

<table id="table1"> ... 
    <table id="table2"> ... 
    </table> 
</table> 

를 그런 다음 선택기이 정말 대답하지 않고 단순히

$('#table1').find('a') 

될 수 있습니다 이 디자인은 유지 보수가 훨씬 쉬우 며 변경하기가 쉽습니다.