使用WordPress中的Jquery和css区分两个相同的HTML ID元素

我知道拥有多个具有相同ID的HTML元素是一种不好的做法。 然而，我需要专门修改其中任何一个。

我研究过并发现了Jquery方法’document.getElementByID’，该方法返回第一个类似元素，并允许您使用css进行更改。 使用它我写下面的代码，但它不起作用。

$(document.getElementById('it_trending-3')).css({"display":"none"}); 

我使用CSS-JS-PHP wordpress插件在我的wordpress主题中添加了这段代码，从中创建了一个快捷方式，然后添加了短代码。 有人可以指导我出错的地方和地点吗？

也可以随意提出一个不同的function，可能让我使用可能的索引专门指向每个相同的ID元素。 谢谢！

Answer 1

为要更改的div保留一个类：

 
 1 2 3  

Jquery会像这样：

 $(function() { var w = $("div"); console.log($('#a').length); console.log($('body #a').length); console.log($('#a', w).length); }); $(".test").first().css({"color":"orange"}); //or $(".test:first").css({"color":"orange"}); 

但是如果你想通过排序索引选择类中的任何特定元素，那么你需要这样做：

 var x = $(".test"); $(x[1]).css({"color":"orange"}); 

Answer 2

您可以通过两种方式实现这一目标。

基于元素的层次结构或基于类属性/自定义数据属性的元素。

在下面的例子中，我们有3个具有相同id的span元素，我们必须为每个span元素应用3种颜色。

HTML

 
  Applying css to same Id with hierarchy (span in 1st div)  
 
  Applying css to same Id with hierarchy (span in 2nd div)  
 


  Applying css to same Id with class  

1. 使用基于元素层次结构的js / jquery应用css

JQuery的

 (function($){ $("div:last #it_trending-3").css("color", "red"); $("div:first #it_trending-3").css("color", "green"); })(jQuery); 

2. 基于类属性/自定义数据属性的元素。

JQuery的

 (function($){ $("#it_trending-3.testcls").css("color", "blue"); })(jQuery); 

JS小提琴演示