Набор <a> для отображения ни

Вот мой HTML:Набор <a> для отображения ни

<td> 
    <a class="link" href="#"> 
    <span class="download">Link</span> 
    </a> 
    <a class="link" href="#"> 
    <span class="csvdownload">Link 2</span> 
    </a> 
</td>

Мне нужно установить этот CSS:

a.link { 
    display: none; 
}

Но только к <a>, который содержит оболочку с классом csvdownload

В идеале нужно делать это строго с помощью javascript, а не плагина, такого как jQuery ...

источник

2010-06-29 CLiown

Об этом с JavaScript: все, что можно сделать с помощью jQuery, можно сделать изначально в JavaScript, поскольку jQuery - это всего лишь фреймворк. –

var spans = document.getElementsByTagName('span'); 
for (var i=0,n=spans.length;i<n;i++) { 
    if (spans[i].className=="csvdownload") { 
    spans[i].parentNode.style.display='none'; 
    break; 
    } 
}

Вам может понадобиться, чтобы проверить TextNode в FF

источник

2010-06-29 15:05:01 mplungjan

как видно здесь http://stackoverflow.com/questions/398816/how-to-handle-firefox-inserting-text-elements-between-tags – mplungjan

Если у вас есть контроль над разметкой, это было бы намного лучше:

<td> 
    <a class="download" href="#">Link</a> 
    <a class="csvdownload" href="#">Link 2</a> 
</td>

Вы уже знаете, что <a> метки «ссылки» поэтому добавление класса CSS избыточно (замените любые правила CSS, используя .link, чтобы просто использовать a). Затем спрячьте свои ссылки: display:none непосредственно в классе .csvdownload.

Если вы по-прежнему нужен класс «ссылка», чтобы отличать их от других якорей, вы можете просто оба класса:

<td> 
    <a class="link download" href="#">Link</a> 
    <a class="link csvdownload" href="#">Link 2</a> 
</td>

источник

2010-06-29 15:07:49

Как насчет селекторов CSS? a + span: #csvdownload {display: none} или что-то в этом роде – mplungjan

Существуют различные способы сделать это с существующей разметкой. Я хочу сказать, что это действительно сложно. Кроме того, селектор +, как известно, проблематичен в большинстве версий IE (вообще не работает в IE6). –

Чтобы расширить предыдущий ответ, вы также можете использовать:

var byClass = document.getElementsByClassName, 
    el; 
if (byClass) { 
    el = byClass('cvsdownload'); 
} else { 
    var spans = document.getElementsByTagName('span'); 
    for (var i = 0, n = spans.length; i < n; i++) { 
     if (spans[i].className == "csvdownload") { 
      el = spans[i]; 
      break; 
     } 
    } 
} 
if (el) { 
    el.parentNode.style.display = 'none'; 
}

Как правило, быстрее использовать встроенные методы, где это возможно.

источник

2010-06-29 15:08:43

Предполагая, что у вас нет никаких правил CSS, прикрепленные к a.link, что бы придать ширина/высота в отсутствие содержания, просто установив display: none; в span.csvdownload должны эффективно достичь того же, как скрывая его родительский элемент. Вам даже не понадобится Javascript, просто добавьте его в таблицу стилей.

источник

2010-06-30 07:10:42 MooGoo

Набор <a> для отображения ни

ответ

Смежные вопросы