2011-01-03 2 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> 

Так, например, я хотел бы изменить все hrefs из "www.google.com" в "www.foo.com". Я могу изменить атрибут href, но у меня возникают проблемы с моим селектором b/c, когда есть время, когда вторая таблица не будет существовать.

Мой текущий селектор выглядит следующим образом: $('table a').filter(':not(table:last a)')

Я уверен, что это не самый эффективный способ сделать это, но это работает, пока возможность не второй таблицы вступил в игру.

+2

Как получить доступ к первой таблице, есть ли идентификатор или абсолютная ссылка, которую вы можете использовать? Это так, должно быть легко, используя '>' в селекторе, чтобы предотвратить пересечение дерева дальше, чем ожидалось. –

ответ

5

Если ваш "основной" таблица не находится внутри другой таблицы, вы можете сделать:

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

или что то же самое:

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

Обновление: С точки зрения производительности, Patrick's answer намного лучше.

+1

Спасибо, ребята, за отличные ответы. Я собираюсь принять это. Он работает, и я не могу сказать, кто ответил сначала вам или мририго ниже. Кроме того, производительность никогда не должна быть проблемой, поскольку она генерируется динамически, число строк никогда не будет выше 25. –

0

Вы можете использовать контейнер для вашего стола.
Если это тело:

$ («тело> стол> тр> тд> а»)

0

Попробуйте использовать child selector и дает основную таблицу идентификатор (если он не имеет один уже есть):

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

Где #maintable это идентификатор вашей основной таблицы.

Редактировать: Вы также хотите добавить тег <tbody> к таблице (по причинам, указанным в комментариях).

Это использует основные селектора CSS в новых браузерах и не требует никакой магии jQuery, если вы не используете более старый браузер.

+0

Будьте осторожны с использованием '>', когда дело доходит до '

' элементов. Даже если нет '', большинство браузеров вставляют один, что приведет к сбою вашего селектора. – user113716

+0

@patrick dw: Хорошая точка. В этом случае «

» может быть добавлен явно, чтобы вы точно знали, что он есть, а затем селектор изменится на: '$ ('# maintable> tbody> tr> td> a')' –

+0

Да, Я полностью поддерживаю явное включение '

' для обеспечения согласованности между браузерами. – user113716

1

Я думаю, что я предпочел бы сделать это:

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

Найти все таблицы, а затем сократить набор для всех, кроме последнего, и, наконец, сделать .find() для <a> элементов.

Причина в том, что я сильно склонен к действительным селекторам CSS, так что querySelectorAll может быть успешно использован jQuery.

+0

Как насчет 'table: first'? –

+0

@Felix: Просто дал обновление, чтобы объяснить, почему. Селектор ': first' подходит под категорию недействительных селекторов CSS. Незначительное соображение, если есть только две таблицы. – user113716

+0

Я вижу. Просто подумал, что это выглядит красивее;) Но ты прав ... спасибо за объяснение. –

0

Если вы можете изменить динамически сгенерированный HTML, вы должны действительно дать каждой таблице свойство ID:

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

Тогда ваши селекторы могут быть просто

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

Это не реально ответить на ваш вопрос, но этот дизайн намного более удобен в обслуживании и легче изменить.