如何为给定的id添加一个类

Question

这是我的代码，

<svg>
    <path id="a"/>
    <path id="a"/>
    <path id="a"/>
</svg>

我在“a”（id）中添加了一个类，如下所示，

 $("#a").setAttribute('class', 'highlightPathStyle');

但是该类只添加了第一个路径，但我需要在“a”（id）中应用类。 如何解决这个问题

Answer 1

ID应该是唯一的，您应该使用相同的类名：

<svg>
  <path class="a"/>
  <path class="a"/>
  <path class="a"/>
</svg>

并使用类选择器：

 $(".a").addClass('highlightPathStyle');

Answer 2

拥有多个重复的ID符合HTML标准。但是，如果这不受您的控制（来自插件或其他东西），请执行：

ngModel

否则，如果您可以控制标记，请添加一个类并在类上选择：

$("[id=a]").addClass("highlightPathStyle");

Answer 3

确保您拥有唯一的ID。 您可以使用addClass方法向元素添加类：

$('svg path#a').addClass('highlightPathStyle');

  

将指定的类添加到匹配元素集中的每个元素。

文档：http://api.jquery.com/addClass/

Answer 4

使用以下代码添加类

$("path").removeAttr('id').attr('class','highlightPathStyle');

Answer 5

1. ID应该是唯一的。
2. 类名应该被命名为合格。
3. addClass会添加类，即使它们之前已添加过。使用此：

所以

<svg>
    <path class="higlightable"/>
    <path class="higlightable"/>
    <path class="higlightable"/>
</svg>

和

$('.higlightable').toggleClass('highlightPathStyle',true);

Answer 6

他们是对的。你应该使用一个唯一的ID。它只会在您尝试添加类时读取第一个ID。

相反，你可以这样做

<svg>
<path class="a"/>
<path class="a"/>
<path class="a"/>
</svg>

如果你想在你可以这样做的同时添加课程

$('svg').find('path').addClass('highlightPathStyle');

如果要在单击时在特定路径上添加类

$('.a').click(function(){
  $(this).addClass('highlightPathStyle');
});