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

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

我找到了“document.getElementByID”方法，该方法返回第一个类似的元素，并允许您使用更改它。我用它写了下面的代码，但它不起作用

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

我已经使用在我的wordpress主题中添加了此代码，从中创建了一个快捷方式，然后添加了快捷码。有人能告诉我哪里出了问题吗

---

也可以自由地建议一个不同的函数，它可能会让我使用maybe索引专门指向每个相同的ID元素。谢谢

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

<div>
    <span id="a" class="test">1</span>
    <span id="b" class="test">2</span>
    <span>3</span>
</div>

但是，如果希望通过排序索引选择类中的任何特定元素，则需要如下操作：

$(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"});

---

您可以通过两种方式实现这一点

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

在下面的示例中，我们有3个具有相同id的跨度元素，并且我们必须对每个跨度元素应用3种颜色

HTML

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

---

为什么不给每个类添加一个不同的类，并用$.classname引用每个类呢。句点表示类，句点表示id，因为它看起来像是将jQuery或document.getElementByClassName与javascript一起使用。您永远不会使用$document.getElementById'it_trending-3'，因为它以错误的方式将JavaScript与jQuery结合在一起。如果您计划不止一次地使用某个对象，您应该使用类。你能给出一些上下文来解释为什么你必须使用ID两次吗？类名也是一样的。它基本上是一个wordpress模板，网站中作为小部件容器的部分只能在主页上放置一次，这意味着我不能在其他任何地方或不同的地方放置小部件。如果你再次复制这个部分，它基本上复制了相同的id，相同的类，相同的一切。这就是为什么我试图区分ID，从第一部分删除一些小部件，在第二部分删除备用部件，从而为我创建两个单独的小部件部分。他说，ID必须是相同的，即使这是一种不好的做法。我实际上是想了解什么情况下可以保留ID相同…您不能多次使用ID。ID是唯一的，类是可重用的，可以根据需要多次使用。是的，我同意你的观点，现在如果是这样，他可以保留一个类，并使用jquery的第一个元素，他可以选择该类中的第一个元素。像$wrapper这样做更有效。classname:first与使用jquery first函数不同。

<div>
  <span id="it_trending-3">
    Applying css to same Id with hierarchy  (span in 1st div)
  </span>
</div>
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 2nd div)
</span>
</div>

<br /><br /><br />
<span id="it_trending-3" class="testcls">
  Applying css to same Id with class
</span>

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

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