仅将CSS类添加到那些没有“title”属性的链接中

Add CSS class to only those links that do not have 'title' attribute

本文关键字：title 属性 链接 CSS 添加 那些 仅将      更新时间：2023-10-23
<table>
    <tr>
        <td><a href src="xxx" title="Some text">Link</a></td>
        <td><a href src="xxx" title="">Link</a></td>
    </tr>
    <tr>
        <td><a href src="xxx" title="Some text">Link</a></td>
        <td><a href src="xxx" title="Some text">Link</a></td>
    </tr>
</table>

我想添加一些 CSS 类到

<td><a href src="xxx" title="">Link</a></td>

我怎样才能用jQuery或JavaScript做到这一点

无需使用 jQuery 添加 CSS 类。您可以在 CSS 中使用属性值选择器。

a[title=""] {
    color: red;
}

使用 jQuery 添加类，而不仅仅是样式目的

$('a[title=""]').addClass('someClass');

选择没有title属性的元素

a:not([title]) {
    color: red;
}

可以在jQuery中使用相同的选择器。

$('a:not([title])')

我怎样才能用jQuery或JS做到这一点

你可以用attribute equals selector来做到这一点，

$("table > tbody > tr > td > a[title='']").addClass("something");

另请注意，您有一个无效的 html，tbody应该是 table 元素的直接子元素。

<table>
  <tbody> <!-- note the tbody here -->
    <tr>
      <td><a href src="xxx" title="Some text">Link</a></td>
      <td><a href src="xxx" title="">Link</a></td>
    </tr>
    <tr>
      <td><a href src="xxx" title="Some text">Link</a></td>
      <td><a href src="xxx" title="Some text">Link</a></td>
    </tr>
  </tbody>
</table>

演示

正如其他答案所指出的，您可以使用 css 来实现这一点。但是，如果您设置为使用 javascript 或 jQuery，则可以使用以下方法;

注意 - 我不推荐这个解决方案，我发布这个纯粹是因为你要求一个javascript/jQuery解决方案。使用CSS进行 唯一的选择。

var links = document.getElementsByTagName('a');
for(var l = 0; l < links.length; l++){
  if(!links[i].hasAttribute('title')){
   // Link without title attribute
   links[l].style.color = 'red';
   // Or if you want to add a class...
   links[l].setAttribute('class', links[l].getAttribute('class') + 'red');
  }
}
相关文章：