Question

这是我的HTML：

<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这样的插件...

Answer 1

如果您可以控制标记，那就更好了：

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

您已经知道<a>标签是“链接”，因此添加CSS类是多余的（使用.link替换任何CSS规则以简单地使用a）。然后直接在.csvdownload类上隐藏设置display:none的链接。

如果你仍然需要“link”类来区分它们与其他锚点，你可以简单地同时拥有这两个类：

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

Answer 2

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;
  }
}

您可能需要在FF中测试textnode

Answer 3

要扩展上一个答案，您还可以使用：

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';
}

在可能的情况下使用内置方法通常会更快。

Answer 4

假设您没有附加到a.link的CSS规则会在没有内容的情况下传递宽度/高度，只需将display: none;设置为span.csvdownload就可以有效地实现与隐藏其相同的功能父元素。您甚至不需要Javascript，只需将其添加到样式表即可。

设置<a> to display none</a>

4 个答案: